Vue使用websocket即时通信

黄良钵

分类: 程序开发 508 0

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.           break;
  18.         // 发言
  19.         case "say":
  20.           break;
  21.       }
  22.     },
  23.     onclose() {
  24.       console.log("连接关闭");
  25.     },
  26.     onerror() {
  27.       console.log("出现错误");
  28.     },
  29. }

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

 

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
Vue、WebSocket

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “Vue使用websocket即时通信”

Loading...