
在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. },