以下是一个基于JavaScript和HTML的简单网页聊天室实例,包括私聊和广播功能,并能保存和显示所有以前的聊天记录。这个例子使用Node.js作为服务器端。

  1. 创建一个名为index.html的HTML文件,包含以下内容:
<!DOCTYPE html>
<html>
<head>
    <title>Chat Room</title>
    <style>
        #messages {
            max-height: 300px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <div id="messages"></div>
    <input type="text" id="input" />
    <button onclick="sendMessage()">发送</button>

    <script>
        var socket = new WebSocket("ws://localhost:3000");

        socket.onmessage = function(event) {
            var messages = document.getElementById("messages");
            var message = document.createElement("div");
            message.innerText = event.data;
            messages.appendChild(message);
        };

        function sendMessage() {
            var input = document.getElementById("input");
            var message = input.value;
            socket.send(message);
            input.value = "";
        }
    </script>
</body>
</html>
  1. 创建一个名为server.js的服务器端JavaScript文件,使用ws模块创建WebSocket服务器,处理客户端的连接和消息,并保存和显示所有以前的聊天记录。
const WebSocket = require('ws');
const fs = require('fs');

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

wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
        // 保存聊天记录
        fs.appendFile('chat.log', message + '\n', function(err) {
            if (err) throw err;
        });

        // 广播消息给所有连接的客户端
        wss.clients.forEach(function each(client) {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });

    // 发送以前的聊天记录给新连接的客户端
    fs.readFile('chat.log', 'utf8', function(err, data) {
        if (err) throw err;
        ws.send(data);
    });
});

console.log("Server is running on port 3000");
  1. 在命令行中运行node server.js启动服务器。

  2. 在浏览器中打开index.html文件,可以在输入框中输入消息并点击发送按钮发送消息。所有连接的客户端都会收到这条消息,并在页面上显示。

这个例子简单地将所有聊天记录保存在一个文本文件中,并在新连接的客户端上发送以前的聊天记录。你可以根据自己的需求来扩展和改进这个聊天室

帮我建一个基于JavaScripthtml可以私聊可以广播的网页聊天室实例并给予一个完整的客户端与服务端并能保存并显示所有以前的聊天记录

原文地址: https://www.cveoy.top/t/topic/iLGt 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录