基于nodejs+webSocket的聊天室（实现：加入聊天室、退出聊天室、在线人数、在线列表、发送信息、接收信息）

1  安装 socket.io模块 npm install

"socket.io": "latest"

2 app.js相关

ws = require('socket.io'); //依赖该模块

let server = http.createServer(app).listen(300); //将服务器赋值给变量

let io = ws(server);

io.on('connection', function (socket) { //服务器监听'connection'

    console.log(socket);

}

3 在创建 public/chat.html

<!--引入的原因：当websocket服务不能用时使用ajax轮查询继续通信-->

<script src="socket.io.min.js"></script>

<script>

        io.connect('/'); //客户端发起 connect连接

</script>

4 浏览器打开chat.html页面

5 说明websocket通信建立连接成功

6 开始(搞)做(事)聊天室

7 服务器端代码

let userList = {},

    usernum = 0;

io.on('connection', function (socket) {

    socket.on('msg', function (data) { //接收前端发送过来的聊天内容

        //console.log(data);

        //把有前台发来的内容广播出去

        io.emit('chat', data);

    });

    socket.on('login', function (data) { //服务端监听消息名为login的通信 通过回调函数反应给浏览器

        userList[data.userid] = data.name; //给对象userList添加内容

        socket.name = data.name; //保留客户端发来的该用户username

        socket.userid = data.userid; //保留客户端发来的该用户的userid

        usernum++;//登录一个用户+1

        data.num = usernum; //给data添加一个num属性并赋值

        //console.log(usernum);

        io.emit('login',{data:data, userList:userList}); //把加入聊天室的人广播出去

    });

    // disconnect 退出触发的事件

    socket.on('disconnect', function(){

        delete userList[socket.userid];//删除退出的用户

        usernum--;

        console.log(usernum);

        io.emit('logout',{name:socket.name, num:usernum, userList:userList});

    });

})

8 前台页面代码  --使用jquery库

    用户名：<input type="text" class="name"> <button class="join" onclick="Chat.login()">进入聊天室</button>

    <div id="con"></div>

    <input type="text" class="send-con"><button onclick="Chat.submit()" class="send">发送</button>

    <div class="num"></div>

    <div class="userlist"></div>

    <!--引入的原因：当这个服务不能用时使用ajax轮查询继续通信-->

    <script src="socket.io.min.js"></script>

    <script>

        const Chat = {

            joinBtn: $('.join'),

            sendMsgBtn: $('.send'),

            usename: null,  //保存用户登录时输入的用户名

            userid: null,   //保存用户登录时候的id

            socket: null,   //保存 WebSocket服务

            init: function(username){  //初始化

                this.socket = io.connect('/'); //客户端发起 connect连接

                this.username = username; //给用户名赋值

                this.userId = new Date().getTime() +''+ Math.floor(Math.random()*899+100);

                this.socket.emit('login', {name: this.username, userid:this.userId}); //向服务端提交名为'login'的信息

                this.socket.on('login', function(data){ //监听名为'login'由服务端发来的信息

                    Chat.updateSystemMsg(data, 'login'); //?? Chat

                    //console.log(this);

                });

                //服务端发来'logout'退出信息时

                this.socket.on('logout', function(data){

                   Chat.updateSystemMsg(data, 'logout');

                });

                //服务端发来 chat的聊天消息

                this.socket.on('chat', function(data){

                    //console.log(data);

                    Chat.updateSystemMsg(data, 'chat');

                });

            },

            updateSystemMsg: function(data, action){

                let $con = $('#con'),

                    html = $con.html(),

                    $userList = $('.userlist'),

                    userList = '',

                    $num = $('.num'),

                    numList = $num.html();

                    //console.log(data);

                if(action === 'login'){ //当是登录时候

                    html += `<p>${data.data.name}进入了聊天室`;

                    numList = `当前在线人数${data.data.num}`;

                    $userList.empty();

                    for(let i in data.userList){

                        userList +=  `<p>${data.userList[i]}</p>`;

                    };

                    $userList.html('<h3>当前在线列表:</h3>'+userList);

                    $num.html(numList);

                }else if(action === 'logout'){ //当是退出的时候

                    //console.log(this.username);

                    html += `<p>${data.name}退出了聊天室`;

                    numList = `当前在线人数${data.num}`;

                    $userList.empty();

                    for(let i in data.userList){

                        userList +=  `<p>${data.userList[i]}</p>`;

                    };

                    $userList.html('<h3>当前在线列表:</h3>'+userList);

                    $num.html(numList);

                }else if(action === 'chat'){

                    html += `<p>${data.username}:${data.content}</p>`;

                }

                $con.html(html);

            },

            submit: function(){ //发送信息

                let $sendMsgInp = $('.send-con'),

                    sendCon = $sendMsgInp.val();

                if(sendCon){ //信息输入框输入的有内容

                    this.socket.emit('msg', {username:this.username, content:sendCon}); //发送 msg

                }else{

                    alert('发送的内容不能为空');

                }

            },

            login: function(){ //加入聊天室

                const $name = $('.name').val();

                $name && this.init($name); //$name不为空时 执行后面语句

            }

        }

    </script>