vue3 使用socket的完整代码
作者：就是个名称
这篇文章主要介绍了vue3 使用socket的完整代码,包括vue3客户端和服务端的实例讲解,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
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 socketcheshi.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>结果打印
到此这篇关于vue3 使用socket的文章就介绍到这了,更多相关vue3 使用socket内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！