前端WebSocket基本用法速通

我****************，文章那么多话呢？就说咋用就完事了！好好好都这么玩是吧 

 

 建立成功后，服务器发送广播就会触发onmessage这个事件。以下代码可直接用。（服务器地址得自己整奥，我这是假的）

 如果整个项目要用就放全局的页面或着App.vue可试。（照葫芦画瓢就能实现）

<template>
    <div>
        <el-badge :value="messageV" >
             <i class="el-icon-message-solid"></i>
        </el-badge>
    </div>
</template>

<script>
import { getList } from '@/request/api'
export default {
  data () {
    return {
      messageV:0,
    }
  },
  methods: {
    
    getMyList() {
        getList().then((res) => {
            if (res.status === 200) {
                this.messageV=res.data.length
            }
        })
    },
    webPack(){
      let that=this
      if (typeof WebSocket === 'undefined') {
        console.log('您的浏览器不支持WebSocket，无法获取数据');
        return false;
      }
      //地址是服务器的地址，如果自己本地搭建服务器就用本地地址
      var ws = new WebSocket("ws://192.168.6.66:11016/webSocket");
      // 初始化
      ws.onopen = function() { // 建立连接成功
        console.log("WebSocket连接已建立");
      };
      // 接收服务端返回的数据
      ws.onmessage = function(evt) {
        that.getMyList()
        console.log( "Received Message: " + evt.data);
      };
      // 连接失败
      ws.onerror = function (evt) { 
        console.log('ws连接异常，请稍候重试',evt);
      };
      //尝试重连websocket
      ws.onclose = function(event) {
        console.log('连接关闭')
        reconnect(); 
      }
      function reconnect() {
        console.log("正在重连");
        setTimeout(function () {
            that.webPack()
        }, 1000);
      }
    },
  },
  created(){
    this.getMyList()
    this.webPack()
  },
}
</script>

<style scoped lang="scss">

</style>

 私密马赛，瓦达西尽力了。

如果想全面一点，看看这个也是相当不错的。vue中使用原生WebSocket - 简书 (jianshu.com)https://www.jianshu.com/p/4b80167de0ee