JavaScript网页聊天室实例：私聊和广播功能实现

以下是一个基于 JavaScript 和 HTML 的简单网页聊天室实例，实现了私聊和广播功能：

HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <title>网页聊天室</title>
</head>
<body>
    <h1>网页聊天室</h1>
    <div id='chat'>
        <div id='messages'></div>
        <input type='text' id='input' placeholder='输入消息...' />
        <button onclick='sendMessage()'>发送</button>
    </div>

    <script src='chat.js'></script>
</body>
</html>

JavaScript 代码 (chat.js)：

const socket = new WebSocket('ws://localhost:3000');

// 连接成功
socket.onopen = function() {
    console.log('连接成功');
};

// 接收消息
socket.onmessage = function(event) {
    showMessage(event.data);
};

// 连接关闭
socket.onclose = function(event) {
    console.log('连接关闭');
};

// 发送消息
function sendMessage() {
    const message = document.getElementById('input').value;
    socket.send(message);
    showMessage('我: ' + message);
    document.getElementById('input').value = '';
}

// 显示消息
function showMessage(message) {
    const messagesDiv = document.getElementById('messages');
    const messageDiv = document.createElement('div');
    messageDiv.textContent = message;
    messagesDiv.appendChild(messageDiv);
}

该代码使用 WebSocket 实现实时通信，并在收到消息时将其显示在页面上。用户可以在输入框中输入消息，并点击发送按钮发送消息。收到的消息将显示在聊天室中，并在左侧显示发送者的名称（这里是'我'）。

注意：

此代码仅用于演示目的，仅在本地运行，并且需要一个 WebSocket 服务器来处理连接和消息传递。您需要自己实现服务器端代码。
为了实现私聊功能，您需要在消息中添加接收者的标识信息，并根据该信息在服务器端将消息发送给指定用户。
为了实现广播功能，您需要将消息发送给所有连接的用户。

总结：

本实例演示了如何使用 JavaScript 和 HTML 创建一个简单的网页聊天室，并使用 WebSocket 实现实时通信。您可以根据需要扩展功能，例如添加用户登录、私聊、广播等。