zoukankan      html  css  js  c++  java
  • Vue中使用websocket

    <template>
      <div class="test">websocket demo</div>
    </template>
    <script>
        export default {
            data() {
                return {
                    websock: null,
                }
            },
        created(){ //页面刚进入时开启长连接
               this.initWebSocket()
           },
        destroyed: function() {//页面销毁时关闭长连接
          this.websocketclose();
        },
        methods: { 
          initWebSocket(){ //初始化weosocket
     
            let wsuri = "ws://echo.websocket.org/";
     
            this.websock = new WebSocket(wsuri);
     
            this.websock.onopen = this.websocketonopen;
     
            this.websock.onerror = this.websocketonerror;
     
            this.websock.onmessage = this.websocketonmessage;
     
            this.websock.onclose = this.websocketclose;
           }, 

          websocketonopen() {
            console.log("WebSocket连接成功");
          },
          websocketonerror(e) { //错误
           console.log("WebSocket连接发生错误");
          },
          websocketonmessage(e){ //数据接收 
            const redata = JSON.parse(e.data);
             //注意:长连接我们是后台直接1秒推送一条数据,
    //但是点击某个列表时,会发送给后台一个标识,后台根据此标识返回相对应的数据,
    //这个时候数据就只能从一个出口出,所以让后台加了一个键,例如键为1时,是每隔1秒推送的数据,为2时是发送标识后再推送的数据,以作区分
            console.log(redata.value);
          },

          websocketsend(agentData){//数据发送
            this.websock.send(agentData);
          },

          websocketclose(e){ //关闭
            console.log("connection closed (" + e.code + ")");
         },
       },
      }
    </script>
     
  • 相关阅读:
    借助HTML分别禁用IE8, IE9的兼容视图模式的小技巧
    IE兼容性问题
    php解析html类库simple_html_dom
    jquery 自定义类
    JS:收集的一些Array及String原型对象的扩展实现代码
    JS 替换
    JQ 取窗口的宽度.窗口的框度历
    java判断时间是否在时间段内 开始时间大于结束时间返回true
    bootstrap4 nav 菜单
    CSS样式居中 -webkit-background-size:center;background-size:center;
  • 原文地址:https://www.cnblogs.com/luobiao/p/10552093.html
Copyright © 2011-2022 走看看