vue3 使用socket
服务端配置服务端 socket server.js (我这里是用node写的, java同理)如果使用express 需要在安装下expressnpm install express --sevenpm install socket.io --saveserver.js 服务端const express = require('express')let fs = require('fs')const
·
Vue3 客户端
首先我们下载依赖 socket.io-client
npm install socket.io-client --save
socket.js
import io from 'socket.io-client'
// 链接 服务端
const socket = io('http://localhost:3002', {
query: {},
transports: ['websocket', 'polling'],
})
export default socket
然后再组件中引入
import { defineComponent, onMounted, computed, ref } from "vue";
import socket from "@/utils/socket.js";
export default defineComponent({
name: "operation",
setup() {
onMounted(() => {
// socket.connected = true; // 默认false, 在和java调试中,需要打开链接 值变为true
socket.on("connect", () => {
console.log("socketio-connect");
});
});
}
})
然后我们启动服务 前后台都要起,这时候我们看到 控制台和 服务端都有打印结果,就说明连接成功了。
服务端
配置服务端 socket server.js (我这里是用node写的, java同理)
如果使用 express 需要在安装下 express
npm install express --seve
npm install socket.io --save
server.js 服务端
const express = require('express')
let fs = require('fs')
const app = express()
let port = 3002
// 读取文件
const server = app.listen(port, () => {
console.log('成功启动express服务,端口号是' + port)
})
//引入socket.io传入服务器对象 让socket.io注入到web网页服务
const io = require('socket.io')(server);
io.on('connection', function(socket) {
console.log('初始化');
// 接受 客户端 message事件
socket.on("message", function (msg) {
// 服务端推送客户端 客户端也要用 socket.on("message",(data)=>{}) 接收
io.emit("message", msg) //服务器通过广播将新用户发送给全体群聊成员
})
//监听log事件
socket.on("log", function (msg) {
// 服务端推送客户端
io.emit("log", msg) //服务器通过广播将新用户发送给全体群聊成员
})
});
然后我们就可以实现socket 通讯了
完整代码
server,js
const express = require('express')
const app = express()
let port = 3002
const server = app.listen(port, () => {
console.log('成功启动express服务,端口号是' + port)
})
//引入socket.io传入服务器对象 让socket.io注入到web网页服务
const io = require('socket.io')(server);
let indexSate = 0
let timer = null
io.on('connection', function(socket) {
console.log('初始化');
// 初始化
indexSate = 0
clearTimeout(timer)
timer = null
socket.on("start", function(msg) {
console.log(msg)
timer = setInterval(() => {
io.emit('message', indexSate);
indexSate++
}, 1000)
})
socket.on("stop", function(msg) {
console.log(msg)
clearTimeout(timer)
timer = null
})
});
socket.js
import io from 'socket.io-client'
const socket = io('http://localhost:3002', {
query: {},
transports: ['websocket', 'polling'],
})
export default socket
cheshi.vue
<template>
<div>
<el-button size="small" @click="start" type="primary">开始</el-button>
<el-button size="small" @click="stop" type="primary">暂停</el-button>
<div></div>
</div>
</template>
<script>
import { defineComponent, onMounted, computed, ref } from "vue";
import socket from "@/utils/socket.js";
export default defineComponent({
name: "operation",
setup() {
// socket.connected = true; // 默认false, 在和java调试中,需要打开链接 值变为true
onMounted(() => {
socket.on("connect", () => {
console.log("socketio-connect");
});
});
socket.on("message", (data) => {
console.log(data);
});
const start = () => {
socket.emit("start", "开始");
};
const stop = () => {
socket.emit("stop", "暂停");
};
return {
start,
stop,
};
},
});
</script>
<style lang="less" scoped>
</style>
结果打印
更多推荐
所有评论(0)