Vue中使用websocket

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

<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>

 

以上是 Vue中使用websocket 的全部内容， 来源链接： utcz.com/z/377261.html

回到顶部