程序笔记
使用 WebSocket 开发网页聊天示例，需要以下几个步骤：
在服务端创建 WebSocket 服务器。 在客户端创建 WebSocket 连接。 在客户端发送和接收消息。
服务端
在服务端创建 WebSocket 服务器，需要使用 WebSocket 相关的 API 来建立 WebSocket 连接。以下是使用 Node.js 创建 WebSocket 服务器的示例：
const http = require("http");
const ws = require("ws");
const server = http.createServer((req, res) => {
if (req.url === "/ws") {
const wss = new ws(req);
wss.on("message", (message) => {
// 接收消息
console.log(message);
// 发送消息
wss.send(message);
});
}
res.writeHead(200, { "Content-Type": "text/plain" });
res.end("Hello, World!");
});
server.listen(8080);
客户端
在客户端创建 WebSocket 连接，需要使用 WebSocket 相关的 API 来建立 WebSocket 连接。以下是使用 JavaScript 创建 WebSocket 连接的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Websocket Chat</title>
</head>
<body>
<input type="text" id="message">
<button onclick="send()">发送</button>
<ul id="messages"></ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.0/socket.io.min.js"></script>
<script>
const socket = io("ws://localhost:8080");
socket.on("message", (message) => {
// 接收消息
const li = document.createElement("li");
li.textContent = message;
document.getElementById("messages").appendChild(li);
});
function send() {
// 发送消息
socket.emit("message", document.getElementById("message").value);
}
</script>
</body>
</html>
示例说明
在服务端，我们使用 ws() 函数来创建一个 WebSocket 服务器。服务器会监听 /ws 路径上的 HTTP 请求。当客户端发起 HTTP 请求时，服务器会创建一个新的 WebSocket 连接。
在客户端，我们使用 io() 函数来创建一个 WebSocket 连接。连接成功后，我们会订阅 message 事件，以便接收服务端发送的消息。我们还可以使用 emit() 函数来发送消息给服务端。
2
声明 本站内容部分来源于网络，仅供参考学习交流并不代表本站观念，如无意中侵犯您的权益（ 包括/图片/视频/个人隐私等信息 ）请来信告知，本站收到信息会尽快处理并回访，联系邮箱：laodilailiao@foxmail.com
