聊天室极简版（node.js）

最新推荐文章于 2023-12-15 15:41:26 发布

spfLinux

最新推荐文章于 2023-12-15 15:41:26 发布

阅读量358

点赞数

分类专栏： node.js 文章标签：聊天室极简版node.js

node.js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

转载自：点击打开链接

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

最终目录：

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

效果图：