Javscript实现WebSocket客户端

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

原生API

设置事件监听函数

有两种方法，设置监听函数：

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

• 使用 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 分支。

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

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

我们是在点击“连接”时，才创建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 分支。