聊天室极简版（node.js）

拼搏现实的明天。 2022-06-02 04:40 259阅读 0赞

转载自：[点击打开链接][Link 1]

跟着大神的脚步，实现了部分功能。

最终目录：

![20180103174912870][]

index.html:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
        <h1>主页</h1>
        <p>welcome <span id="uname"></span></p>
        <p id="p_title1"></p>
        <p id="user_count"></p>
        <div id="msgs">
    
        </div>
        <input type="text" id="send_msg">
        <button id="sendBtn">发送</button>
    
        <div id="loginWrapper">
            <p id="p_server">连接服务器中...</p>
            <p id="p_info"></p>
            <div id="login">
                <input type="text" id="input_nick">
                <button id="btn_login">登录</button>
            </div>
            <p id="login_tip"></p>
        </div>
    
        <script src="js/common.js"></script>
        <script src="js/socket.io.js"></script>
        <script src="js/chat.js"></script>
        <script>
            var socket=io.connect(),//与服务器进行连接
                button=document.getElementById('sendBtn');
            btn_login.οnclick=function(){
                socket.emit('foo', 'hello');//发送一个名为foo的事件，并且传递一个字符串数据‘hello’
            }
        </script>
    
    </body>
    </html>

index.css:

#loginWrapper{
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: rgba(5, 5, 5, .6);
        z-index:10;
        color: #FFF;
    }
    #login{
        display: none;
    }
    #msgs{
        width:50%;
        height:400px;
        border:1px solid #000;
    }

common.js:

function getId(id){
        return document.getElementById(id);
    }

chat.js:

/**
     * Created by web-01 on 2018/1/3.
     */
    window.οnlοad=function(){
        var chat=new Chat();
        chat.init();
    };
    var Chat=function(){
        this.socket=null;
    }
    Chat.prototype={
        init:function(){
            var that=this;
            //建立到服务器的socket连接
            this.socket=io.connect();
            //监听socket的connect事件，此事件表示连接已经建立
            this.socket.on('connect',function(){
                getId('p_server').style.display="none";
                getId('p_info').innerHTML="请输入用户名：";
                getId('login').style.display="block";
                getId('input_nick').focus();
            });
            btn_login.addEventListener('click',function(){
                var nickName=getId('input_nick').value;
                if(nickName.trim().length!=0){
                    that.socket.emit('login',nickName);
                }else{
                    getId('input_nick').focus();
                }
            },false);
            this.socket.on('nickExisted',function(){
                getId('login_tip').innerHTML="昵称已经被占用";
            });
            this.socket.on('loginSuccess',function(){
                getId("uname").innerHTML=getId("input_nick").value;
                getId("loginWrapper").style.display="none";
                getId("send_msg").focus();
            });
            this.socket.on('system',function(nickName,userCount,type){
                var msg=nickName+(type=='login'?'joined':'leave');
                that._displayNewMsg('system',msg);
                getId("p_title1").innerHTML=msg;
                getId("user_count").innerHTML=userCount+(userCount>1?'users':'user')+' online';
            });
            sendBtn.addEventListener('click',function(){
                var messageInput=getId("send_msg"),
                    msg=messageInput.value;
                messageInput.value='';
                messageInput.focus();
                if(msg.trim().length!=0){
                    that.socket.emit('postMsg',msg);
                    that._displayNewMsg('me',msg);
                }
            },false);
            this.socket.on('newMsg',function(user,msg){
                that._displayNewMsg(user,msg);
            })
        },
        _displayNewMsg:function(user,msg){
            var container=getId("msgs"),
                msgToDisplay=document.createElement('p'),
                date=new Date().toTimeString().substr(0,8);
            msgToDisplay.innerHTML=user+'<span>('+date+'):</span>'+msg;
            container.appendChild(msgToDisplay);
            container.scrollTop=container.scrollHeight;
        }
    };

server.js:

/**
     * Created by web-01 on 2018/1/3.
     */
    var http=require('http');
    var server=http.createServer(function(req,res){
        res.writeHead(200,{
            'Content-Type':'text/plain'
        });
        res.write('hello world!');
        res.end();
    });
    
    var express=require('express'),
        app=express(),
        server=require('http').createServer(app);
    app.use('/',express.static(__dirname+'/www'));
    server.listen(80);
    
    var io=require("socket.io").listen(server);
    var users=[];
    io.on('connection',function(socket){
        socket.on('foo',function(data){
            console.log(data);
        });
        socket.on('login',function(nickname){
            if(users.indexOf(nickname)>-1){
                socket.emit('nickExisted');
            }else{
                socket.userIndex=users.length;
                socket.nickname=nickname;
                users.push(nickname);
                socket.emit("loginSuccess");
                io.sockets.emit("system",nickname,users.length,'login');
                console.log("loginSuccess");
            }
        });
        socket.on('disconnect',function(){
            //将断开连接的用户从users中删除
            users.splice(socket.userIndex,1);
            //通知除自己以外的所有人
            socket.broadcast.emit('system',socket.nickname,users.length,'logout');
        });
        socket.on('postMsg',function(msg){
            //将消息发送到除自己外的所有用户
            socket.broadcast.emit('newMsg',socket.nickname,msg);
        });
    });
    
    console.log('server started');

效果图：

![20180103175335008][]

注意：

可以去参考博客看完整实现（可以发图片和表情等）。

[Link 1]: https://www.cnblogs.com/Wayou/p/hichat_built_with_nodejs_socket.html
[20180103174912870]: /images/20220602/b3682da2dd7f4114943f16fe7682a98e.png
[20180103175335008]: /images/20220602/e33b4e0158634872886ed29e3a257e98.png