跟风使用deepseek写一个 websocket最近功能中有个写 websocket的，其实已经改版好几次了，

最近功能中有个写 websocket的，其实已经改版好几次了，通过chatGpt 最终使用效果已经很好，好奇deepseek能不能也实现，以下是最新方法

问题描述如

你好我想请你写一个 websocket class，要有心跳功能，里面还可以添加 event事件，比如 addEvent("key", func). removeEvent("key")这样，在socket连接成功后，发送消息时，可以执行相应func，目标是在 vue或者 react中可以使用，

以下是回答本身，已经可以作为文章发表了

class WebSocketClient {
  constructor(url) {
    this.url = url;
    this.socket = null;
    this.events = new Map();
    this.heartbeatInterval = 30000; // 30秒
    this.heartbeatTimer = null;
  }

  connect() {
    this.socket = new WebSocket(this.url);

    this.socket.onopen = () => {
      console.log('WebSocket connected');
      this.startHeartbeat();
      this.emit('connected');
    };

    this.socket.onmessage = (event) => {
      const message = JSON.parse(event.data);
      this.emit('message', message);
    };

    this.socket.onclose = () => {
      console.log('WebSocket disconnected');
      this.stopHeartbeat();
      this.emit('disconnected');
    };

    this.socket.onerror = (error) => {
      console.error('WebSocket error:', error);
      this.emit('error', error);
    };
  }

  startHeartbeat() {
    this.heartbeatTimer = setInterval(() => {
      if (this.socket.readyState === WebSocket.OPEN) {
        this.socket.send(JSON.stringify({ type: 'heartbeat' }));
      }
    }, this.heartbeatInterval);
  }

  stopHeartbeat() {
    if (this.heartbeatTimer) {
      clearInterval(this.heartbeatTimer);
      this.heartbeatTimer = null;
    }
  }

  send(data) {
    if (this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(JSON.stringify(data));
      this.emit('send', data);
    } else {
      console.error('WebSocket is not open');
    }
  }

  addEvent(key, callback) {
    this.events.set(key, callback);
  }

  removeEvent(key) {
    this.events.delete(key);
  }

  emit(event, ...args) {
    if (this.events.has(event)) {
      const callback = this.events.get(event);
      callback(...args);
    }
  }

  close() {
    if (this.socket) {
      this.socket.close();
    }
  }
}

// 使用示例
const ws = new WebSocketClient('wss://your-websocket-url');

ws.addEvent('connected', () => {
  console.log('Connected event triggered');
  ws.send({ type: 'hello', message: 'Hello Server!' });
});

ws.addEvent('message', (message) => {
  console.log('Message received:', message);
});

ws.addEvent('disconnected', () => {
  console.log('Disconnected event triggered');
});

ws.connect();

功能说明：

心跳功能：每隔30秒发送一次心跳消息，保持连接活跃。
事件管理：可以通过addEvent和removeEvent方法添加和移除事件监听器。
消息发送：通过send方法发送消息，并在发送成功后触发send事件。
连接状态：在连接成功、断开、出错时触发相应的事件。

在Vue或React中使用：

你可以将这个类实例化并在Vue或React组件中使用。例如，在Vue中

export default {
  data() {
    return {
      ws: null,
      messages: []
    };
  },
  created() {
    this.ws = new WebSocketClient('wss://your-websocket-url');

    this.ws.addEvent('connected', () => {
      console.log('Connected to WebSocket');
    });

    this.ws.addEvent('message', (message) => {
      this.messages.push(message);
    });

    this.ws.connect();
  },
  beforeDestroy() {
    this.ws.close();
  }
};

在React中：

import React, { useEffect, useState } from 'react';

const WebSocketComponent = () => {
  const [messages, setMessages] = useState([]);
  const [ws, setWs] = useState(null);

  useEffect(() => {
    const wsClient = new WebSocketClient('wss://your-websocket-url');

    wsClient.addEvent('connected', () => {
      console.log('Connected to WebSocket');
    });

    wsClient.addEvent('message', (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });

    wsClient.connect();
    setWs(wsClient);

    return () => {
      wsClient.close();
    };
  }, []);

  return (
    <div>
      <h1>WebSocket Messages</h1>
      <ul>
        {messages.map((msg, index) => (
          <li key={index}>{JSON.stringify(msg)}</li>
        ))}
      </ul>
    </div>
  );
};

export default WebSocketComponent;

以上是 deepseek的回答，已经非常完善了，直接可以使用

但是在生命周期close，写的有些草率，不知道为啥提示后，一直显示服务器繁忙，无法二次纠错，

以下是 chatGpt的使用答案

// WebSocketComponent.js
import React, { useEffect, useState } from 'react';
import { WebSocketManager } from './WebSocketManager';

const WebSocketComponent = () => {
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const wsManager = new WebSocketManager('ws://your-websocket-url');

    wsManager.addEvent('open', () => {
      console.log('WebSocket connection opened');
    });

    wsManager.addEvent('message', (message) => {
      console.log('Received message:', message);
      setMessages((prevMessages) => [...prevMessages, message]);
    });

    wsManager.addEvent('close', (event) => {
      console.log('WebSocket connection closed:', event);
    });

    wsManager.addEvent('error', (error) => {
      console.error('WebSocket error:', error);
    });

    wsManager.addEvent('timeout', () => {
      console.error('WebSocket heartbeat timeout');
    });

    wsManager.connect();

    return () => {
      wsManager.removeEvent('open');
      wsManager.removeEvent('message');
      wsManager.removeEvent('close');
      wsManager.removeEvent('error');
      wsManager.removeEvent('timeout');
      wsManager.socket.close();
    };
  }, []);

  const sendMessage = () => {
    if (message.trim()) {
      wsManager.send(message);
      setMessage('');
    }
  };

  return (
    <div>
      <h1>WebSocket Example</h1>
      <div>
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="Enter your message"
        />
        <button onClick={sendMessage}>Send</button>
      </div>
      <ul>
        {messages.map((msg, index) => (
          <li key={index}>{msg}</li>
        ))}
      </ul>
    </div>
  );
};

export default WebSocketComponent;

如果需要使用 websocket连接功能，可以使用以上 class 直接使用哦

跟风 使用deepseek写一个 websocket

功能说明：

在Vue或React中使用：

跟风使用deepseek写一个 websocket