- 支持试读
Axum与Websocket
我们将通过几个案例由浅入深地带你掌握Websocket及其应用场景 - 支持试读
简单ECHO服务
本章我们将使用 AXUM 和 Websocket 实现一个简单的 Echo 服务。 - 支持试读
并发读写的ECHO服务
本章我们将实现并发读写的 ECHO 服务 - 支持试读
Javscript实现WebSocket客户端
本章我们将给我们的 ECHO 服务实现一个客户端。你要明确的是,很多语言都能写 WebSocket 客户端,包括 Rust 在内。但基于我们当前的环境,我们使用 JavaScript(TypeScript) 配合 React(Next.js)来实现。 用户在线检测
本章我们将实现用户在线检测功能:用户登录之后,前端通过 WebSocket 来检测 JWT Token 是否依然有效。
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
分支。