[网络协议]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://177.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('连接已关闭...')
    },
  }

完成