以下是一个简单的网页聊天室的示例,可以进行私聊和广播功能:\n\nHTML代码:\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n <title>网页聊天室</title>\n <style>\n #messages {\n max-height: 300px;\n overflow-y: scroll;\n }\n </style>\n</head>\n<body>\n <h1>网页聊天室</h1>\n <div id="messages"></div>\n <input type="text" id="message" placeholder="输入消息..." />\n <button onclick="sendMessage()">发送</button>\n\n <script>\n var socket = new WebSocket('ws://localhost:3000'); // 连接WebSocket服务器\n\n socket.onmessage = function(event) {\n var message = event.data;\n var messagesDiv = document.getElementById('messages');\n messagesDiv.innerHTML += '<p>' + message + '</p>';\n };\n\n function sendMessage() {\n var messageInput = document.getElementById('message');\n var message = messageInput.value;\n socket.send(message); // 发送消息到服务器\n messageInput.value = '';\n }\n </script>\n</body>\n</html>\n\n\nNode.js服务器代码:\njavascript\nconst WebSocket = require('ws');\n\nconst wss = new WebSocket.Server({ port: 3000 });\n\nwss.on('connection', function connection(ws) {\n ws.on('message', function incoming(message) {\n wss.clients.forEach(function each(client) {\n if (client.readyState === WebSocket.OPEN) {\n client.send(message); // 广播消息给所有连接的客户端\n }\n });\n });\n});\n\n\n将以上两段代码分别保存为index.htmlserver.js文件,然后在命令行中运行以下命令启动服务器:\n\n\nnode server.js\n\n\n在浏览器中打开index.html,你应该可以看到一个简单的网页聊天室界面。你可以在输入框中输入消息并点击“发送”按钮发送消息,所有连接到服务器的客户端都会收到这条消息。

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

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

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