Home >Web Front-end >JS Tutorial >How to use Node.js to implement web-based real-time chat function

How to use Node.js to implement web-based real-time chat function

PHPzOriginal: 2023-11-08 11:57:501410browse

With the rapid development of the Internet, real-time communication functions have become a must-have feature for many websites and applications. As a lightweight, efficient, event-driven asynchronous I/O JavaScript running environment, Node.js can quickly build high-performance real-time applications, so it has become the best choice for developing real-time communication functions. This article will introduce in detail how to use Node.js to implement web-based real-time chat function and provide specific code examples.

First of all, we need to build a basic web server, which can be implemented using the http module that comes with Node.js. The specific code is as follows:

const http = require('http');
const server = http.createServer();

server.listen(3000, () => {
    console.log('服务器已启动，监听端口：3000');
});

Next, we need to use the socket.io module to implement the real-time communication function. Socket.io is a real-time communication library based on the WebSocket protocol and compatible with multiple transmission methods. It supports two-way communication between the client and the server, and is very suitable for real-time chat scenarios. The command to install the socket.io module is as follows:

npm install socket.io

After the installation is completed, we can use the socket.io module on the server side to enable real-time communication functionality. The specific code is as follows:

const http = require('http');
const server = http.createServer();
const io = require('socket.io')(server);

io.on('connection', (socket) => {
    console.log('有一个用户已连接');

    socket.on('disconnect', () => {
        console.log('有一个用户已断开连接');
    });

    socket.on('chat message', (msg) => {
        console.log('收到一条新消息：' + msg);
        io.emit('chat message', msg);
    });
});

server.listen(3000, () => {
    console.log('服务器已启动，监听端口：3000');
});

In the above code, we listen to the connection event of socket.io, which means it will be triggered when a user connects. When a user connects, we will output a prompt message on the console. Next, we listened to the disconnect event of socket.io, which means it will be triggered when the user disconnects. When a user disconnects, we will also output a prompt message on the console. Finally, we listened to the custom chat message event, which indicates the receipt of new messages from users. When new messages arrive, we broadcast them to all online users.

On the client side, we need to introduce the socket.io-client module to connect to the server and realize the display and sending of real-time chat. The specific code is as follows:

<!DOCTYPE html>
<html>
    <head>
        <title>实时聊天</title>
        <script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script>
            $(function() {
                var socket = io();

                $('form').submit(function(e) {
                    e.preventDefault(); // 阻止表单提交
                    var msg = $('#m').val();
                    socket.emit('chat message', msg); // 发送消息到服务器
                    $('#m').val('');
                    return false;
                });

                socket.on('chat message', function(msg) { // 收到新消息
                    $('#messages').append($('<li>').text(msg));
                });
            });
        </script>
    </head>
    <body>
        <ul id="messages"></ul>
        <form>
            <input type="text" id="m" autocomplete="off" />
            <button>发送</button>
        </form>
    </body>
</html>

In the above code, we introduced the socket.io-client and jQuery modules. After the page is loaded, we create a connection with the server and listen to the chat message event, which means it will be triggered when a new message is received. When a new message arrives, we add it to the list of messages on the page. At the same time, when the user enters text in the input box and clicks the send button, we send the message to the server.

In summary, we have implemented the real-time chat function based on the WebSocket protocol by using Node.js and socket.io modules. In actual projects, we can also extend data such as persistent storage, identity authentication, and message push to provide richer real-time communication services.

The above is the detailed content of How to use Node.js to implement web-based real-time chat function. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery JS 事件异步 http websocket

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Web project using Node.js to implement online voting functionNext article：Web project using Node.js to implement online voting function

See more

How to use Node.js to implement web-based real-time chat function

Related articles