Vue 中使用 WebSocket

WebSocket是H5中的一个新通讯标准，与传统的HTTP（通讯）模型相比，WebSocket支持长连接，提供双向的数据通讯，为需要支持实时或准实时通讯的应用(如：股票，消息推送等)提供了非常强大的技术手段。本文提供的就是在Angular中使用WebSocket技术的一个简要的指引。

在本文中，我们以一个接收服务端推送消息的界面为例来演示在Vue中如何使用WebSocket。

新建一个名为 MessagePage 的组件，在组件中放置一个 textarea，用来显示从服务端收到的推送消息。

template 部分的代码如下:

<div>
  <div>
    <div>My Messages</div>
    <div>
      <div>
        <div>
          <button v-on:click="startListener">Start Listener</button>
        </div>
        <div>
          <textarea cols="20" rows="10" v-model="msgs" defaultValue/>
        </div>
      </div>
    </div>
  </div>
</div>

在 script 部分，我们直接使用 HTML5 标准中定义的 WebSocket 对象，代码如下:

export default {
  name: "MessagePage",
  data() {
    return {
      msgs: "",
      ws: undefined
    };
  },
  methods: {
    updateMsg() {
      if (this.ws === undefined || this.ws.closed) {
        this.ws = new WebSocket('<your server url>');
        this.ws.onopen = () => {
          console.log("Connection Successfully.")
        };
        this.ws.onmessage = evt => {
          console.log("Received data..." + evt.data);
          this.msgs = this.msgs + evt.data + "\n"
        };
        this.ws.onclose = () => {
          console.log("Connection Closed...")
        };
      }
    },
    startListener() {
        this.updateMsg();
    }
  }
}