在VUE中使用websocket

zlting~2023-08-08 20:39

websocket概念

1、WebSocket是HTML5下一种新的协议，在单个TCP连接上进行全双工通信；

2、Websocket是一个持久化的协议，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，能更好的节省服务器资源和带宽并达到实时通讯的目的。

websocket前端代码实现

javascript 复制代码

data() {
return {
	// 后面 webSocket 是后台设定的接口地址，token是你这个前台的识别码id。
    // 用于区分，比如你多个地方链接后台，后台推送数据的时候需要根据这个id不同，给对应的人推送，不然就推送到所有建立链接的网页上了      
    sockPath: 'ws://' + '172.16.xx.100:9207/websocket/' + getToken(), // 后台地址
    socket: null,
}
},
created() {
	this.websoketInit();
},
method() {
	websoketInit() {
	  if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        this.socket = new WebSocket(this.sockPath); // 实例化

        this.socket.onopen = this.websocketOnOpen; // 监听 连接

        this.socket.onerror = this.websocketOnError; // 监听 错误信息

        this.socket.onmessage = this.websocketOnMessage; // 监听 消息，注：方法后面不能加空括号()，否则就接收不到数据了

        this.socket.onclose = this.websocketOnClose; // 监听 关闭
      }
	},
	/** 连接 成功 时的回调函数 */
    websocketOnOpen() {
      console.log("websocket 连接成功");
    },
    /** 连接 错误 时的回调 */
    websocketOnError(err) {
      console.log("websocket 连接错误 " + err);
    },
    //后台消息推送过来，接收的函数，参数为后台推过来的数据。
    websocketOnMessage(msg) {
      // json数据使用JSON.parse()：报错 Unexpected number in JSON at position 106
      // 有浏览器是不兼容JSON这个对象的，或者有的里面有JSON.parse解析不了的东西，所以暂时还是使用: eval("("+data+")");
      var temp = eval("(" + msg.data + ")");
      // js判断数组或对象
      if (temp.hasOwnProperty("name")) {
        console.log('name值', name)
      }
    },
    /** 连接 关闭 的回调 */
    websocketOnClose(event) {
      // socket是链接的实例，close就是关闭链接
      this.socket.close();
      console.log("断开链接成功");
    },
},