Javscript实现WebSocket客户端

本章我们将给我们的 ECHO 服务实现一个客户端。你要明确的是，很多语言都能写 WebSocket 客户端，包括 Rust 在内。但基于我们当前的环境，我们使用 JavaScript（TypeScript） 配合 React（Next.js）来实现。

• new WebSocket()：实例化一个 WebSocket 对象
• send()：向服务端发送消息
• close()：关闭连接
• message事件：接收到新消息时触发
• open事件：连接成功时触发
• close事件：关闭连接后触发
• error事件：发生错误时触发

• 使用 addEventListener(事件名, 监听函数)，比如：

  ws.addEventListener('message', (ev)=> {
      console.log(ev);
  });

• 使用 on事件名 = 监听函数，比如：

ws.onmessage = (ev)=>{
    console.log(ev);
};

封装成 React 组件

代码比较简单，这里对几个需要注意的地方进行讲解，其它部分请自行阅读。

• "use client";：由于 WebSocket （以及其它交互）需要浏览器环境，所以，需要使用客户端组件

• 注意，我们并不是直接修改 msgs 数组，而是通过 lastMsg 的变动来修改。如果直接修改 msgs 数组的话，在 message 等事件监听函数中，会清空历史信息：

    useEffect(() => {
      if (lastMsg) {
        setMsgs((prev) => prev?.concat({ ...lastMsg }));
      }
    }, [lastMsg]);
  

• 我们是在点击“连接”时，才创建WebSocket连接

    const connectHandler = () => {
      const _ws = new WebSocket(url);
      _ws.addEventListener("message", (ev: MessageEvent<any>) => {
        setLastMsg(newMsg("RECV", ev.data as string));
      });
      _ws.addEventListener("open", () => {
        setLastMsg(newInfoMsg("已连接"));
        setConnected(true);
      });
      _ws.addEventListener("close", () => {
        setLastMsg(newInfoMsg("已断开连接"));
        setConnected(false);
      });
      setWs(_ws);
    };
  

  本章代码位于03/websocket-js-client 分支。