How to use Node.js to implement web-based real-time chat function-JS Tutorial-php.cn

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

PHPz

Release： 2023-11-08 11:57:50

Original

1404 people have browsed it

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

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');
});

Copy after login

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

Copy after login

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');
});

Copy after login

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>

Copy after login

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!