websocket+vue使用（简单例子）

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。


目前大部分浏览器支持 WebSocket() 接口
看一下下面的例子：
需求：在一个表格中实时接收后端传过来的数据
1.定义表格需要绑定的数组，已经websocket的初始化对象

data () {
    return {
      tableData1: [],//表格数据
      ws: null//websocket
    }
  },

2.写关于websocket的方法

methods: {
    WebSocketTest () {
      if ('WebSocket' in window) {
        alert('您的浏览器支持 WebSocket!')
        // 打开一个 web socket
        this.ws = new WebSocket('ws://110.10.10.10:8585/websocket/textname')//与后端连接的端口
        //发送数据
        this.ws.onopen = function () {
          // Web Socket 已连接上，使用 send() 方法发送数据
          // alert('数据发送中...')
        }
        var that = this
        // 接收数据
        this.ws.onmessage = function (evt) {
          let received = JSON.parse(evt.data)
          alert('数据已接收...')
          //将收到的数据push到表格中去
          that.tableData1.push(received)
          console.log(that.tableData1)
        }
        //关闭
        this.ws.onclose = this.close
      }
    },
    // websocket关闭
    close () {
      alert('连接已关闭...')
    },
  }

这样就可以了

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

规范化的（适用于多种类型实时接受的数据）

第一步：添加js文件

第二步：在main.js中引用

import SocketService from '@/utils/socket_service'; //websocket

//对服务端进行 WebSocket 的一个连接
SocketService.Instance.connect()
//其它组件通过 this.$socket 更好的使用 SocketService 中定义的方法
Vue.prototype.$socket = SocketService.Instance;

第三步：在页面中使用

created () { 
    this.$socket.registerCallback("1", this.getBaseData);// 1是定义的类型标志，this.getBaseData数据过来处理数据的方法
  },
methids(){
// 获取基本信息
    getBaseData(ret){
      this.basicForm=ret //ret接收到的数据
      this.mapbasicList.set(ret.bsid,ret)
      // this.$forceUpdate()
      this.myMapChangeTrucher+=1
      console.log("1--接收到基本信息")
      console.log(this.mapbasicList)
    },
}