如何利用原生JavaScript实现在线聊天室？

文章标签： html css JavaScript

2023-05-04 17:45:31 发布

要实现在线聊天室，需要用到以下关键词：

WebSocket：实现实时通信的协议，可以在客户端和服务器之间建立双向连接，传输数据时不需要刷新页面。
EventSource：用于服务器向客户端推送数据，也是一种实时通信的技术。
Node.js：使用JavaScript编写服务器端代码的平台，可以使用它来建立WebSocket连接和处理客户端请求。
Express.js：Node.js的一个Web框架，可以简化服务器端代码的编写。
MongoDB：一种NoSQL数据库，可以用来存储聊天记录等数据。

下面是一个简单的原生JavaScript实现在线聊天室的示例：

前端代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线聊天室</title>
</head>
<body>
    <div id="messages"></div>
    <form>
        <input type="text" id="message">
        <button type="submit" id="send">发送</button>
    </form>
    <script>
        const messages = document.getElementById('messages');
        const messageInput = document.getElementById('message');
        const sendButton = document.getElementById('send');

        const socket = new WebSocket('ws://localhost:3000'); // 建立WebSocket连接

        // 接收服务器发来的消息，并添加到聊天记录中
        socket.onmessage = function(event) {
            const message = event.data;
            const messageElement = document.createElement('div');
            messageElement.innerText = message;
            messages.appendChild(messageElement);
        };

        // 发送消息给服务器
        sendButton.addEventListener('click', function(event) {
            event.preventDefault();
            const message = messageInput.value;
            socket.send(message);
            messageInput.value = '';
        });
    </script>
</body>
</html>

服务器端代码

const WebSocket = require('ws');
const express = require('express');
const app = express();

const port = 3000;
const server = app.listen(port, function() {
    console.log(`Server listening on port ${port}`);
});

const wss = new WebSocket.Server({server});

// 处理WebSocket连接
wss.on('connection', function(ws) {
    console.log('Client connected');

    // 接收客户端发来的消息，并广播给所有连接的客户端
    ws.on('message', function(message) {
        console.log(`Received message: ${message}`);
        wss.clients.forEach(function(client) {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });
});

在这个示例中，前端代码通过WebSocket与服务器建立双向连接，可以接收服务器发来的消息并发送消息给服务器。服务器端使用Node.js和WebSocket库建立WebSocket连接，可以处理客户端发来的消息，并广播给所有连接的客户端。可以根据需求修改代码，添加用户认证、存储聊天记录等功能。

2023-05-13 04:30:55 更新

上一篇：JS中apply和call的区别是什么？下一篇：如何使用 HTML 实现语义化标题？

相关推荐