Javscript实现WebSocket客户端 - Websocket - AXUM中文网 - 带你使用 axum 构建企业应用

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

JS客户端

原生API

现代浏览器提供了对 WebSocket 的原生支持，一下是常用的API。

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]);
```

  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 分支。