vue2 实现原生 WebSocket

原生WebSocket： new WebSocket

WebSocket | ThinkTS官网

export default {
  data() {
    return {
      socket: null
    };
  },
  created() {
    // 1. 创建 WebSocket 实例
    this.socket = new WebSocket('ws://localhost:3000');

    // 2. 监听 WebSocket 连接打开事件
    this.socket.onopen = () => {
        console.log('当前客户端已连接');
    };

    // 3. 监听 WebSocket 消息事件
    this.socket.onmessage = (event) => {
        console.log('客户端接收的数据：', JSON.parse(event.data));
        
        // 4. 发送消息给服务端
        let post_data = {name: 'test'}
        this.socket.send(JSON.stringify(post_data))
    };

    // 5. 监听 WebSocket 关闭事件
    this.socket.onclose = () => {
        console.log('WebSocket closed');
    };

    // 6. 监听 WebSocket 错误事件
    this.socket.onerror = (error) => {
        console.log('WebSocket error:', error);
    };
  },
  methods: {
    // 发送消息按钮
    sendMessage(message) {
        // 4. 发送消息到 WebSocket 服务器
        this.socket.send(JSON.stringify(message))
    }
  },
  beforeDestroy() {
    // 关闭 WebSocket 连接
    if (this.socket) {
        this.socket.close();
    }
  }
};