vue2 websocket

// Vue 2 WebSocket 示例代码

// 引入 Vue
import Vue from 'vue';
import io from 'socket.io-client';

// 创建 Vue 实例
new Vue({
  el: '#app',
  data() {
    return {
      socket: null,
      message: '',
      messages: []
    };
  },
  created() {
    // 连接到 WebSocket 服务器
    this.socket = io('http://localhost:3000');

    // 监听来自服务器的消息
    this.socket.on('message', (data) => {
      this.messages.push(data);
    });
  },
  methods: {
    sendMessage() {
      // 发送消息到服务器
      this.socket.emit('message', this.message);
      this.message = ''; // 清空输入框
    }
  }
});

// HTML 部分
/*
<div id="app">
  <div v-for="msg in messages" :key="msg">{{ msg }}</div>
  <input v-model="message" @keyup.enter="sendMessage" />
  <button @click="sendMessage">发送</button>
</div>
*/

// 解释说明：
// 1. 使用 `socket.io-client` 库来连接 WebSocket 服务器。
// 2. 在 Vue 实例的 `created` 生命周期钩子中，建立与 WebSocket 服务器的连接，并监听来自服务器的消息。
// 3. 当用户在输入框中输入内容并按下回车键或点击“发送”按钮时，调用 `sendMessage` 方法将消息发送给服务器。
// 4. 收到的消息会添加到 `messages` 数组中，并通过 `v-for` 指令渲染到页面上。