webSocket使用及vue中封装使用（客户端和服务端搭建）
当时由于c++同事当时出差，于是自学了webSocket并用node搭建了一个简单的服务端用来自己调试，当时就感觉到求人不如求己啊。 P.s：参考的有网上的文章，珠峰全栈里的webSocket、黑马pink老师B站里的另一个老师的实战项目课程里的
webSocket相关基础内容请查看
内容待更新
一、搭建node服务端
1、安装node环境
2、安装nodejs-websocket
控制台输入命令
npm install nodejs-websocket 复制代码
3、新建socket.js文件
socket.js
const ws = require("nodejs-websocket"); console.log("开始建立连接...") const socket = ws.createServer(function(conn){ conn.on("text", function (str) { console.log("message:"+str) let msg = "你好，这里是是日前端~" // let msg = 'websocket处于正常状态' setInterval(() => { conn.sendText(msg); }, 3000) }) conn.on("close", function (code, reason) { console.log("关闭连接") }); conn.on("error", function (code, reason) { console.log("异常关闭", code, reason) }); }).listen(8666) console.log("WebSocket建立完毕") module.exports = socket 复制代码4、运行该js文件看到如下日志即可
二、客户端直接调用
1、新建test.html文件
test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="test"></div> <script> if(window.WebSocket){ var ws = new WebSocket('ws://localhost:8666'); ws.onopen = function(e){ console.log("连接服务器成功"); // 向服务器发送消息 ws.send("来自客户端的消息"); } ws.onclose = function(e){ console.log("服务器关闭"); } ws.onerror = function(){ console.log("连接出错"); } // 接收服务器的消息 ws.onmessage = function(e){ let message = "message:"+e.data+""; console.log(message); document.getElementById('test').innerHTML = message } } </script> </body> </html> 复制代码2、浏览器运行，看到控制台日志如下即成功
三、Vue中函数封装使用
1、新建socket_service.js
socket_service.js
export default class SocketService { /** * 单例 */ static instance = null static get Instance() { if (!this.instance) { this.instance = new SocketService() } return this.instance } // 和服务端连接的socket对象 ws = null // 存储回调函数 callBackMapping = {} // 标识是否连接成功 connected = false // 记录重试的次数 sendRetryCount = 0 // 重新连接尝试的次数 connectRetryCount = 0 // 定义连接服务器的方法 connect() { // 连接服务器 if (!window.WebSocket) { return console.log('您的浏览器不支持WebSocket') } this.ws = new WebSocket('ws://localhost:1234') // 连接成功的事件 this.ws.onopen = () => { console.log('连接服务端成功') this.connected = true // 重置重新连接的次数 this.connectRetryCount = 0 } // // 1.连接服务端失败 // // 2.当连接成功之后, 服务器关闭的情况(连接失败重连) this.ws.onclose = () => { console.log('连接服务端失败') this.connected = false this.connectRetryCount++ setTimeout(() => { this.connect() }, 500 * this.connectRetryCount) } // 得到服务端发送过来的数据 this.ws.onmessage = msg => { console.log('从服务端获取到了数据' + msg.data) // if (this.callBackMapping) { // this.callBackMapping.call(this, dataList) // } } } // 回调函数的注册 registerCallBack (callBack) { console.log('回调函数的注册', callBack) this.callBackMapping = callBack } // 取消某一个回调函数 unRegisterCallBack(callBack){ console.log('取消某一个回调函数', callBack) this.callBackMapping = null } // 发送数据的方法 send (data) { // 判断此时此刻有没有连接成功 if (this.connected) { this.sendRetryCount = 0 this.ws.send(data) } else { this.sendRetryCount++ setTimeout(() => { this.send(data) }, this.sendRetryCount * 500) } } } 复制代码2、在main.js中全局引入实例并挂载到原型
import SocketService from '@/server/socket_service' // 对服务端进行websocket的连接 SocketService.Instance.connect() Vue.prototype.$socket = SocketService.Instance 复制代码
3、在vue组件中使用发送（客户端向服务端发送数据）
this.$socket.send(‘这是客户端发送的数据’) 复制代码
4、在vue组件中使用接收（客户端接收服务端发送的数据）
1）注册回调函数
created(){ // 注册回调函数 this.$socket.registerCallBack(this.testData) } 复制代码2）取消回调函数
destroyed(){ // 取消回调函数 this.$socket.unRegisterCallBack(this.testData) }, 复制代码3）接收到数据data
testData(data) { console.log('获取到传感器websocket数据', data) }
作者：是日前端
链接：https://juejin.cn/post/6988052281627246606