vue socket.io

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

// 创建一个 Vue 实例
new Vue({
  el: '#app',
  data: {
    message: '',
    messages: []
  },
  methods: {
    // 发送消息的方法
    sendMessage() {
      if (this.message.trim() === '') return;
      this.socket.emit('chat message', this.message);
      this.message = '';
    }
  },
  created() {
    // 连接到 Socket.IO 服务器
    this.socket = io('http://localhost:3000');

    // 监听来自服务器的消息事件
    this.socket.on('chat message', function(msg) {
      this.messages.push(msg);
    }.bind(this));
  }
});

解释说明：

1. 引入库：首先我们引入了 Vue 和 socket.io-client。socket.io-client 是用于客户端连接到 Socket.IO 服务器的库。
2. 创建 Vue 实例：创建了一个 Vue 实例，并定义了一些数据属性和方法。
   • message: 当前输入的消息内容。
   • messages: 存储所有接收到的消息。
3. sendMessage 方法：当用户点击发送按钮时，调用此方法将消息发送给服务器。如果消息为空，则不发送。
4. created 钩子：在组件创建时执行以下操作：
   • 使用 io('http://localhost:3000') 连接到 Socket.IO 服务器。
   • 监听来自服务器的 chat message 事件，并将接收到的消息添加到 messages 数组中。

这样，你就可以通过 WebSocket 实现实时通信功能了。