webSocket使用及vue中封装使用（客户端和服务端搭建）

2021年07月23日 17:32

当时由于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)
}
复制代码