网页聊天室实例 - 实现私聊和广播功能 - 常规

下面是一个简单的基于WebSocket的网页聊天室实例，可以实现私聊和广播功能。

HTML部分（index.html）：

<!DOCTYPE html>
<html>
<head>
	<title>聊天室</title>
	<style type='text/css'>
		#messages {
			height: 300px;
			overflow-y: scroll;
		}
	</style>
</head>
<body>
	<div id='messages'></div>
	<input type='text' id='input' placeholder='输入消息...' />
	<button onclick='sendMessage()'>发送</button>

	<script>
		var socket = new WebSocket('ws://localhost:8080');

		socket.onmessage = function(event) {
			var message = JSON.parse(event.data);
			var messagesDiv = document.getElementById('messages');
			var messageDiv = document.createElement('div');
			messageDiv.innerHTML = message.content;
			messagesDiv.appendChild(messageDiv);
		};

		function sendMessage() {
			var input = document.getElementById('input');
			var message = {
				content: input.value
			};
			socket.send(JSON.stringify(message));
			input.value = '';
		}
	</script>
</body>
</html>

Node.js服务器部分（server.js）：

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    wss.clients.forEach(function each(client) {
      client.send(message);
    });
  });
});

这个例子使用了WebSocket库来实现服务器和客户端之间的实时通信。服务器监听8080端口，并在有新的连接建立时，将收到的消息广播给所有连接的客户端。

你可以使用以下命令运行服务器：

node server.js

然后在浏览器中打开index.html文件，你将能够在聊天室中发送消息，并实时接收到其他用户发送的消息。