Vue使用websocket即时通信

在Vue中可以使用socket.io插件,不过这里使用的是js原生的WebSocket

首先再 data 中定义一个ws:

1. data() {
2.    return {
3.      ws: "",
4.    };
5.  },

然后在method中设置相关函数

1. methods: {
2. // ws S
3.     onopen() {
4.       console.log("连接成功");
5.       let login_data = {}
6.       console.log("websocket握手成功,发送登录数据:", login_data);
7.       this.ws.send(login_data);
8.     },
9.     onmessage(e) {
10.       console.log(JSON.parse(e.data));
11.       switch (data["type"]) {
12.         case "ping":
13.           this.ws.send('{"type":"pong"}');
14.           break;
15.         // 登录 更新用户列表
16.         case "login":
17.
18.           break;
19.         // 发言
20.         case "say":
21.
22.           break;
23.       }
24.     },
25.     onclose() {
26.       console.log("连接关闭");
27.     },
28.     onerror() {
29.       console.log("出现错误");
30.     },
31. }

然后在created 初始化:

1. created() {
2.   this.ws = new WebSocket("ws://2020.9jm9.com:7272");
3.   this.ws.onopen = this.onopen;
4.   this.ws.onmessage = this.onmessage;
5.   this.ws.onclose = this.onclose;
6.   this.ws.onerror = this.onerror;
7.
8. },