vue 移动端中使用WebSocket对话

效果：

代码：

import { Toast } from "mint-ui";
export default {
  data(){
    return{
      websocket: null,
      keyWord:'',
      searchKey:'search_qa'
    }
  },
  mounted(){
    // 初始化WebSocket
    this.initWebSocket()
  },
  methods:{
       // 初始化
    initWebSocket() {
      if ("WebSocket" in window) {
        this.websocket = null;
        this.websocket = new WebSocket(
          "wss://" +
            location.hostname +  //当前域名
            "/xxxx/api/ws/csAsk?token=" +  //找后端人员要链接
            sessionStorage.getItem("token") +  //token
            "&channel=2" + //1pc 2移动  //链接参数按实际项目来
            "&corpid=" +
            sessionStorage.getItem("orgId") +  //链接参数按实际项目来
            "&no=" +
            sessionStorage.getItem("openId") //链接参数按实际项目来
        );
        // 连接错误
        this.websocket.onerror = this.setErrorMessage;
        // 连接成功
        this.websocket.onopen = this.setOnopenMessage;
        // 接收消息的回调
        this.websocket.onmessage = this.setOnmessageMessage;
        // 连接关闭的回调
        this.websocket.onclose = this.setOncloseMessage;
      } else {
        this.$toast("当前浏览器不支持websocket");
      }
    },
    setErrorMessage() {
      // this.$toast("连接出错，请尝试重新进入");
      alert('连接出错');
    },
    setOnopenMessage() {
      alert('连接成功')
    },
    setOnmessageMessage(event) {
      alert('接收消息的回调')
      let chatObj = JSON.parse(event.data);
      console.log('chatObj',chatObj);
      
    },
    setOncloseMessage() {
       alert('连接关闭')
    },
     //websocket发送消息
    onSend() {
      if(!this.keyWord){
        Toast("请输入文字");
        return
      }
      let params = {
        query: this.keyWord,
        searchKey: this.searchKey
      };
      this.websocket.send(JSON.stringify(params));  //发送消息
    },
   },
   activated() {
    if (!this.websocket) { 
      this.initWebSocket(); // 关闭后重新调用
    }
  },
  deactivated() {
    this.websocket = null;
    if(this.websocket){
      this.websocket.close();  //离开页面时销毁
    }
  }
 }