域名 AXUM.RS 将于2025年10月到期。我们无意再对其进行续费,我们希望你能够接续这个域名,让更多 AXUM 开发者继续受益。
  • 方案1️⃣AXUM.RS 域名 = 3000
  • 方案2️⃣方案1️⃣ + 本站所有专题原始 Markdown 文档 = 5000
  • 方案3️⃣方案2️⃣ + 本站原始数据库 = 5500
如果你有意接续这份 AXUM 情怀,请与我们取得联系。
说明:
  1. 如果有人购买 AXUM.RS 域名(方案1️⃣),或者该域名到期,本站将启用新的免费域名继续提供服务。
  2. 如果有人购买了 AXUM.RS 域名,且同时购买了内容和/或数据库(方案2️⃣/方案3️⃣),本站将关闭。届时我们或许会以另一种方式与你再相遇。

Javscript实现WebSocket客户端

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

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

要查看完整内容,请先登录