前端简单得WebSocket实现

<template>
  <div>
    <input v-model="message" placeholder="Type your message...">
    <button @click="sendMessage">Send</button>
    <ul>
      <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      ws: null,
      messages: []
    };
  },
  mounted() {
    this.connect();
  },
  beforeDestroy() {
    this.ws.close();
  },
methods: {
  /**
   * 初始化WebSocket连接
   */
  connect() {
    // 服务器地址
    this.ws = new WebSocket('ws://your-websocket-server-url');

    // 添加WebSocket连接打开事件监听器
    this.ws.addEventListener('open', () => {
      console.log('WebSocket connected');
    });

    // 添加WebSocket接收到消息事件监听器
    this.ws.addEventListener('message', (event) => {
      // 将服务器发送的消息添加到本地消息数组中
      this.messages.push(`From Server: ${event.data}`);
    });

    // 添加WebSocket错误事件监听器
    this.ws.addEventListener('error', (error) => {
      console.error('WebSocket error:', error);
    });

    // 添加WebSocket连接关闭事件监听器
    this.ws.addEventListener('close', () => {
      console.log('WebSocket disconnected');
    });
  },

  /**
   * 发送消息到WebSocket服务器的方法
   */
  sendMessage() {
    // 如果有消息且WebSocket连接处于OPEN状态，则发送消息
    if (this.message && this.ws.readyState === WebSocket.OPEN) {
      // 将消息内容发送给服务器
      this.ws.send(this.message);
      // 将发送的消息添加到本地消息数组中（此处假设也作为客户端发送的消息记录）
      this.messages.push(`From Client: ${this.message}`);
      // 清空消息输入框
      this.message = '';
    }
  }
}
};
</script>