node+socket实现简易聊天室功能

下面是使用node+socket实现简易聊天室功能的完整攻略：

一、安装Node.js

Node.js是一个JavaScript运行时环境，可以使用JavaScript进行服务器端编程。我们需要在本地先安装Node.js才能进行后续操作。

二、安装Socket.io

Socket.io是一个实现实时双向通信的JavaScript库。我们可以使用Socket.io来构建聊天室程序。安装方法：

npm install socket.io

三、简易聊天程序示例

下面是一个简易聊天程序的示例：

HTML文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Socket.io 聊天室示例</title>
</head>
<body>
    <ul id="messages"></ul>
    <form action="">
        <input id="m" autocomplete="off"/>
        <button>发送</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        var socket = io();
        $('form').submit(function(e){
            e.preventDefault();
            socket.emit('chat message', $('#m').val());
            $('#m').val('');
            return false;
        });
        socket.on('chat message', function(msg){
            $('#messages').append($('<li>').text(msg));
        });
    </script>
</body>
</html>

服务器代码

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

const http = require('http').Server(app);
const io = require('socket.io')(http);

app.get('/', function(req, res){
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
    socket.on('chat message', function(msg){
        io.emit('chat message', msg);
    });
});

http.listen(3000, function(){
    console.log('listening on *:3000');
});

这个简单的聊天程序的意思是：当用户在页面上输入消息并点击“发送”按钮时，使用Socket.io客户端将消息发送到服务器，然后服务器会再次使用Socket.io将此消息发送到所有客户端。

四、进阶实例

下面是一个更完整的聊天程序实例，其中包含用户登录、房间选择等功能：

HTML文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Socket.io 聊天室示例</title>
</head>
<body>
    <div id="login">
        <h2>登录</h2>
        <form>
            <div>
                <label>用户名:</label>
                <input type="text" name="username" id="username"/>
            </div>
            <div>
                <label>密码:</label>
                <input type="text" name="password" id="password"/>
            </div>
            <div>
                <button id="loginBtn">登录</button>
            </div>
        </form>
    </div>
    <div id="chat" style="display:none">
        <h2>聊天室</h2>
        <div id="channels">
            <h3>选择一个房间</h3>
            <ul id="channelList"></ul>
        </div>
        <div id="chatBox" style="display:none">
            <ul id="messages"></ul>
            <form>
                <input type="text" name="message" id="message" autocomplete="off"/>
                <button id="sendBtn">发送</button>
            </form>
        </div>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        var socket = io();
        $('#loginBtn').on('click', function(e){
            e.preventDefault();
            var username = $('#username').val();
            var password = $('#password').val();
            socket.emit('login', {username: username, password: password});
        });
        socket.on('login success', function(user){
            $('#login').hide();
            $('#chat').show();
            for(var i = 0; i < user.channels.length; i++) {
                var channel = user.channels[i];
                $('#channelList').append('<li><a href="#" data-channel="' + channel + '">' + channel + '</a></li>');
            }
        });
        $(document).on('click', '#channelList a', function(e){
            e.preventDefault();
            var channel = $(this).data('channel');
            $('#channels').hide();
            $('#chatBox').show();
            $('#messages').empty();
            socket.emit('join channel', channel);
        });
        $('#sendBtn').on('click', function(e){
            e.preventDefault();
            var message = $('#message').val();
            socket.emit('chat message', message);
            $('#message').val('');
        });
        socket.on('chat message', function(data){
            $('#messages').append($('<li>').text(data.username + ': ' + data.message));
        });
    </script>
</body>
</html>

服务器代码

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

const http = require('http').Server(app);
const io = require('socket.io')(http);

const users = [];

app.get('/', function(req, res){
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
    socket.on('login', function(data){
        var user = {username: data.username, channels: ['公共频道']};
        users.push(user);
        socket.emit('login success', user);
    });
    socket.on('join channel', function(channel){
        socket.join(channel);
    });
    socket.on('chat message', function(msg){
        var user = null;
        for(var i = 0; i < users.length; i++) {
            if(users[i].username === socket.client.conn.remoteAddress) {
                user = users[i];
                break;
            }
        }
        if(user === null) {
            throw new Error('无效的用户');
        }
        var message = {username: user.username, message: msg};
        io.emit('chat message', message);
    });
});

http.listen(3000, function(){
    console.log('listening on *:3000');
});

这个聊天程序包含了用户登录和房间选择的功能。当用户点击“登录”按钮时，客户端将用户名和密码发送到服务器进行验证。如果验证成功，服务器会将用户添加到用户列表中，并向客户端发送“login success”消息。然后，客户端会显示一个包含各种房间的列表，用户可以选择其中的一个。客户端将所选频道名称发送到服务器，并加入该频道。在聊天室中，当用户提交表单发送消息时，客户端会向服务器发送“chat message”消息，同时将消息显示在页面上。服务器再将此消息广播到所有客户端。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：node+socket实现简易聊天室功能 - Python技术站

node+socket实现简易聊天室功能

相关文章