Websocket 示例 - 使用 JavaScript 和 Node.js 实现实时通信 - 常规

以下是一个简单的 Websocket 示例，它使用 JavaScript 和 Node.js 实现实时通信：

客户端代码

创建一个 HTML 文件，包含以下代码：

<!DOCTYPE html>
<html>
<head>
	<title>Websocket Example</title>
</head>
<body>
	<label for='message'>Message:</label>
	<input type='text' id='message'>
	<button onclick='sendMessage()'>Send</button>
	<div id='output'></div>

	<script>
		// 创建 Websocket 连接
		const socket = new WebSocket('ws://localhost:3000');

		// 监听连接打开事件
		socket.addEventListener('open', (event) => {
			console.log('Websocket connection opened');
		});

		// 监听消息接收事件
		socket.addEventListener('message', (event) => {
			console.log('Message received:', event.data);
			// 将消息显示在页面上
			const output = document.getElementById('output');
			output.innerHTML += '<p>' + event.data + '</p>';
		});

		// 发送消息
		function sendMessage() {
			const message = document.getElementById('message').value;
			socket.send(message);
			console.log('Message sent:', message);
		}
	</script>
</body>
</html>

此代码创建了一个 Websocket 连接，并监听连接打开和消息接收事件。它还提供了一个文本框和一个按钮，用于向服务器发送消息，并将消息显示在页面上。

服务器代码

创建一个 Node.js 文件，包含以下代码：

const WebSocket = require('ws');

// 创建服务器
const server = new WebSocket.Server({ port: 3000 });

// 监听连接打开事件
server.on('connection', (socket) => {
	console.log('Websocket connection opened');

	// 监听消息接收事件
	socket.on('message', (message) => {
		console.log('Message received:', message);
		// 发送消息给所有连接的客户端
		server.clients.forEach((client) => {
			if (client.readyState === WebSocket.OPEN) {
				client.send(message);
			}
		});
	});

	// 监听连接关闭事件
	socket.on('close', () => {
		console.log('Websocket connection closed');
	});
});

此代码创建了一个 Websocket 服务器，并监听连接打开、消息接收和连接关闭事件。它还在收到消息时向所有连接的客户端发送相同的消息。

运行代码

将客户端和服务器代码保存为不同的文件，并在终端中分别运行它们：

node server.js

打开客户端 HTML 文件

现在，打开客户端 HTML 文件并开始发送消息。您应该能够在控制台中看到服务器和客户端之间的消息传递，并在页面上看到收到的消息。

Websocket 示例 - 使用 JavaScript 和 Node.js 实现实时通信