Vue Websocket封装实现方法详解

Websocket作为一种实时双向通信协议，越来越受到前端开发人员的青睐。Vue作为一种非常流行的前端框架，提供了一种方便的方式来进行Websocket的封装。

本文将详细讲解如何使用Vue来封装Websocket，并提供两个示例。下面将会依次讲解：

1. Websocket的基本使用方法
2. 如何封装Websocket
3. 两个示例介绍

Websocket的基本使用方法

在使用Websocket之前，需要先了解一些基本概念和操作。下面是一些Websocket的基本使用方法：

创建Websocket实例

var ws = new WebSocket('ws://localhost:8080');

Websocket事件

• onopen: 连接成功触发
• onmessage: 收到消息触发
• onclose: 连接关闭触发
• onerror: 连接出错触发

下面是一个使用Websocket的示例代码：

var ws = new WebSocket('ws://localhost:8080');

ws.onopen = function() {
  console.log('connection opened');
};

ws.onmessage = function(event) {
  console.log('received message: ' + event.data);
};

ws.onclose = function() {
  console.log('connection closed');
};

ws.onerror = function() {
  console.log('connection error');
};

如何封装Websocket

在Vue中，我们可以使用Vue的Mixin特性来封装Websocket。Mixin是一种可复用的代码片段，可以是数据、计算属性、方法、生命周期钩子等等。下面是一个Websocket的Mixin示例：

export default {
  data() {
    return {
      ws: null
    }
  },
  created() {
    this.connectWebsocket();
  },
  methods: {
    connectWebsocket() {
      this.ws = new WebSocket('ws://localhost:8080');
      this.ws.onmessage = (event) => {
        this.handleWebsocketMessage(event);
      };
      this.ws.onclose = () => {
        this.reconnectWebsocket();
      };
    },
    handleWebsocketMessage(event) {
      console.log('received message: ' + event.data);
    },
    reconnectWebsocket() {
      setTimeout(() => {
        this.connectWebsocket();
      }, 1000);
    },
    sendWebsocketMessage(data) {
      this.ws.send(data);
    }
  }
};

这个Mixin包含了一个ws变量，它表示Websocket实例。它的生命周期钩子函数中通过connectWebsocket()方法建立连接。这个方法中监听了onmessage和onclose事件，并在onmessage事件触发时调用handleWebsocketMessage()方法。在onclose事件触发时，调用reconnectWebsocket()方法。

这个Mixin还包含了两个方法：sendWebsocketMessage()用于发送消息，handleWebsocketMessage()用于处理消息。下面我们来看两个示例，来更好地了解Websocket封装的应用。

示例一

在这个示例中，我们将通过Websocket获取当前时间，并将其显示在Vue的页面上。

<template>
  <div>
    <h1>Current Time: {{ currentTime }}</h1>
  </div>
</template>

<script>
  import WebsocketMixin from './WebsocketMixin';

  export default {
    mixins: [WebsocketMixin],
    data() {
      return {
        currentTime: ''
      }
    },
    methods: {
      handleWebsocketMessage(event) {
        this.currentTime = event.data;
      }
    },
    mounted() {
      this.sendWebsocketMessage('get-current-time');
    }
  };
</script>

在这个示例中，我们引入了之前的WebsocketMixin。我们将实时时间存储在当前组件的currentTime变量中，并在连接Websocket成功后，向服务器发送一个消息"get-current-time"。服务器收到这个消息后，将返回当前的时间。当收到服务器返回的消息后，会触发handleWebsocketMessage()，将时间存储在currentTime变量中，并在页面上显示。

示例二

这个示例中，我们将实现一个简单的聊天室，通过Websocket实现实时消息的收发。

<template>
  <div>
    <ul>
      <li v-for="message in messages" :key="message.id">
        {{ message.content }}
      </li>
    </ul>
    <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息"/>
  </div>
</template>

<script>
  import WebsocketMixin from './WebsocketMixin';

  export default {
    mixins: [WebsocketMixin],
    data() {
      return {
        messages: [],
        newMessage: ''
      }
    },
    methods: {
      handleWebsocketMessage(event) {
        this.messages.push({
          id: Date.now(),
          content: event.data
        });
      },
      sendMessage() {
        if (this.newMessage) {
          this.sendWebsocketMessage(this.newMessage);
          this.newMessage = '';
        }
      }
    }
  };
</script>

在这个示例中，我们创建了一个聊天室。当输入框收到"enter"键按下的事件时，调用sendMessage()方法来发送消息。当收到Websocket的消息时，调用handleWebsocketMessage()方法并将收到的消息存储在messages数组变量中。messages数组中的每个元素都是一个包含"id"和"content"字段的JavaScript对象。"id"用于唯一标识每个消息，"content"用于存储消息的内容。

至此，我们已经学习了如何使用Vue来封装Websocket，以及两个Websocket的具体应用。