使用 Websocket
WebSocket 是一种网络通信协议，它提供了在单个 TCP 连接上进行全双工通信的能力。与传统的 HTTP 请求-响应模式不同，WebSocket 允许服务器主动向客户端推送数据，实现了真正的双向通信。
主要特点：
- 全双工通信：客户端和服务器可以同时发送和接收数据
- 低延迟：建立连接后，数据传输的开销很小
- 实时性：服务器可以主动推送数据，无需客户端轮询
- 持久连接：一次握手后保持连接状态，避免重复建立连接
WebSocket 协议以 ws:// 或 wss:// （安全连接）开头，使用标准的 HTTP 握手过程建立连接，之后升级为 WebSocket 协议进行通信。
本文介绍如何使用云托管（容器型和函数型）实现 Websocket 收发消息，并在客户端访问这些服务。
使用函数型云托管
在本地创建一个目录 websocket-demo，在目录中新建一个 index.js 文件，并编写以下代码：
exports.main = function (event, context) {
console.log({ event, context });
if (context.ws) {
const ws = context.ws;
ws.on("close", (msg) => {
console.log("close: ", msg);
ws.send("bye!");
});
ws.on("message", (msg) => {
console.log("message: ", msg);
ws.send(`echo: ${msg?.data}`);
});
}
};
exports.main.handleUpgrade = async function (upgradeContext) {
console.log(upgradeContext, "upgradeContext");
if (upgradeContext.httpContext.url === "/reject-upgrade") {
return {
allowWebSocket: false,
statusCode: 403,
body: JSON.stringify({ code: "code", message: "message" }),
contentType: "appliaction/json; charset=utf-8",
};
}
return { allowWebSocket: true };
};
这段代码实现了以下功能：
- main 函数处理 WebSocket 连接后的消息交互：
- 监听 close 事件，在连接关闭时发送告别消息
- 监听 message 事件，收到消息时回复当前时间和消息内容
- handleUpgrade 函数控制 WebSocket 连接的建立：
- 当访问 /reject-upgrade 时拒绝连接
- 其他路径允许建立 WebSocket 连接
部署调试
推荐使用 云开发 CLI 进行部署。
安装 CLI 并登录后，进入项目根目录，执行以下命令：
# 部署函数型云托管实例
tcb cloudrunfuntion deploy
实例部署完成以后，前往 云开发控制台。
在左侧导航栏选择【云托管】, 在【服务列表】页面可以找到刚刚部署的实例，点击进入【服务详情】页面，在详情页可以找到默认域名。
将默认域名开头的 https:// 替换为 ws:// 或者 wss:// ，在 Postman 等工具中进行 WebSocket 连接测试。
使用容器型云托管
你可以使用代码示例，示例代码仓库地址。
克隆代码仓库后，进入项目根目录，目录结构如下：
├── Dockerfile
├── app
│ └── server.js
└── package.json
其中 app/server.js 是使用 express 和 express-ws 实现的服务，云托管会根据 Dockerfile 来构建容器。
关于容器型云托管的更多信息，可以参考 服务开发说明。
部署调试
推荐使用 云开发 CLI 进行部署。
安装 CLI 并登录后，进入项目根目录，执行以下命令：
# 部署容器型云托管实例
tcb cloudrun deploy
实例部署完成以后，前往 云开发控制台。
在左侧导航栏选择【云托管】, 在【服务列表】页面可以找到刚刚部署的实例，点击进入【服务详情】页面，在详情页可以找到默认域名，我们假设创建的服务默认域名为：https://demo.ap-shanghai.run.tcloudbase.com，将默认域名开头的 https:// 替换为 ws:// 或者 wss:// 如：wss://demo.ap-shanghai.run.tcloudbase.com,在 Postman 等工具中进行 WebSocket 连接测试。
访问 websocket 服务
微信小程序
wx.cloud.init({
env: "xxxx-yyy", // 替换为你的环境 ID
});
const { socketTask } = await wx.cloud.connectContainer({
service: "websocket-demo", // 替换自己的服务名
path: "/", // 不填默认根目录
});
socketTask.onMessage(function (res) {
console.log("【WEBSOCKET】", res.data);
});
socketTask.onOpen(function (res) {
console.log("【WEBSOCKET】", "链接成功！");
socketTask.send({
data: "这是小程序消息",
});
});
socketTask.onClose(function (res) {
console.log("【WEBSOCKET】链接关闭！");
});
更新信息可以查看微信云托管文档。
浏览器
const ws = new WebSocket("wss://demo.ap-shanghai.run.tcloudbase.com"); // 替换为你的服务地址
ws.onopen = function () {
console.log("链接建立成功");
ws.send("微信云托管测试信息"); // 发送消息
};
ws.onmessage = function (evt) {
console.log(evt.data);
};
ws.onclose = function () {
console.log("链接已经关闭");
};
Node.js
Node.js 中可以使用 ws 模块来实现 WebSocket 客户端。
import WebSocket from "ws";
function run() {
const ws = new WebSocket("wss://demo.ap-shanghai.run.tcloudbase.com"); // 替换为你的服务地址
ws.on("close", (code, reason) => {
console.log("close:", code, `${reason}`);
});
ws.on("error", (err) => {
console.error("error: ", err);
});
ws.on("upgrade", () => {
console.log("upgrade");
});
ws.on("ping", () => {
console.log("recv ping message");
});
ws.on("pong", () => {
console.log("recv pong message");
setTimeout(() => {
ws.ping();
}, 1000);
});
ws.on("unexpected-response", (ws, req, res) => {
// 非 upgrade 响应和 3xx 重定向响应认为是 unexpected-response
console.log("recv unexpected-response message");
});
ws.on("message", (data) => {
console.log("received: %s", data);
});
ws.on("open", () => {
ws.ping();
ws.send("string data");
ws.send(Buffer.from("buffer data"));
});
}
run();
注意事项
业务代码中使用WebSocket/SSE 出现超时的情况，这块都是用户业务代码中收到请求后长时间（60s）没有给出响应 ，
如果WebSocket/SSE 连接建立后长时间（60s）没有数据传输，网关会主动关闭非活跃的连接，建议客户端或者服务端每隔10s发送一个心跳包来保持连接；