html5中关于socket.io实现一个聊天室的示例代码

html5中关于socket.io实现一个聊天室的示例代码

nbsp;html>                        .user{            color:lightskyblue;            cursor: pointer;        }    
    
        
            
                
                    
欢迎来老王聊天室
                
                
                    
                    
                
                
                    
                        
                                                    
                        
                            发送                                                                                    
                    
                
            
        
        
            
                
                    
在线用户
                
                
                    
                
                
                    
在线人数 0
                
            
        
    
    let txtMsg = document.querySelector('#txtMsg');    let onlineUsers = document.querySelector('#onlineUsers');    //此脚本会在window上增加一个io的属性    //http://localhost:8080/=/=空    let socket = io();    //当客户端连接服务器成功之后,向后台发送一个消息，问一下现在有哪些在线用户    socket.on('connect',function(){        socket.emit('users');    });    let messageUl = document.querySelector('#messageUl');    let userUl = document.querySelector('#userUl');    //监听服务器发过来的消息    socket.on('message',function(msgObj){        let li = document.createElement('li');        li.className = 'list-group-item';        li.innerHTML = `${msgObj.username}:${msgObj.content} ${new Date(msgObj.createAt).toLocaleString()}`;        messageUl.appendChild(li);    });    socket.on('userList',function(userList){        userUl.innerHTML =  userList.map(item=>(            `
${item}`        )).join('');        countUser();    });    socket.on('user-added',function(username){        let li = document.createElement('li');        li.className = 'list-group-item';        li.innerHTML = `${username}`;        userUl.appendChild(li);        countUser();    });    function countUser(){        onlineUsers.innerHTML = `在线人数 ${userUl.children.length}`;    }    //发送事件    function send(){        let content = txtMsg.value;//先拿到聊天的内容        socket.send(content);        txtMsg.value = '';    }    function handleKeyDown(event){        if(event.keyCode == 13)            send();    }    //给父级绑定点击事件 事件委托    //要判断点的是span而非别的元素    userUl.addEventListener('click',function(event){        //如果事件源的类名是user的话        if(event.target.className == 'user'){            let username = event.target.innerHTML;            txtMsg.value = `@${username} `;        }    })

登录后复制

后台node

let express = require('express');let path = require('path');let app = express();app.get('/',function(req,res){    res.sendFile(path.resolve('index.html'));});let server = require('http').createServer(app);//socket.io是依赖http服务器let io = require('socket.io')(server);//声明一个对象，保存所有的客户端用户名和它们的socket对应关系let clients = {};//监听客户端的连接，当连接到来的时候执行此回调函数io.on('connection',function(socket){    //在函数的内部声明一个变量，叫username    let username;    //监听客户端的发过来的消息，当消息发过来的时候执行回调函数    socket.on('message',function(data){        if(username){            //判断是公聊还是私聊            let reg = /@([^ ]+) (.+)/;            let result = data.match(reg);            if(result){//如果result有值则匹配上了                //此处是私聊                let toUser = result[1];                let content = result[2];                clients[toUser] && clients[toUser].send({                    username,                    content,                    createAt:new Date()                });            }else{//没匹配上                //正常发言，向所有的客户端进行广播                io.emit('message',{                    username,content:data,createAt:new Date()                });            }        }else{            username = data;//把这个消息当成用户名            //关联起来            clients[username]= socket;            //向所有的客户端广播说有新的用户加入聊天室            io.emit('message',{                username:'系统',content:`欢迎 ${username} 加入聊天室`,createAt:new Date()            });            //事件的名字可以自定义            io.emit('user-added',username);        }    });    //监听客户端发过来的请求，把用户数组返回    socket.on('users',function(){        let userList = Object.keys(clients);        socket.emit('userList',userList);    });});server.listen(8080);/** * 1.实现匿名聊天 *   1. 在客户端里连接上服务器 *   2. 给发送按钮绑定点击事件，当点击此按钮的时候先获取文本框的内容，把文本框的内容发送到后台 *   3. 后台服务器把此消息广播给所有的客户端。 *   4. 所有的客户端收到消息后把此消息在ul列表里显示出来 * 2.实现具名聊天 *   1. 当此用户第一次向服务器发消息的时候 *   2. 服务器会判断此客户端的用户名是否设置过，如果没设置的话就把这个消息当成用户名，以后再发消息的话都会以这个作为用户名,如果设置过了就是正常发言 * 3. 私聊 *   1. 点击某个在线用户，点击后会在输入框里出现  @xxx yyy *   2. 服务收到私聊的请求后会找到xxx对应的客户端向他单个发消息 *   3 **/

登录后复制

以上就是html5中关于socket.io实现一个聊天室的示例代码的详细内容，更多请关注【创想鸟】其它相关文章！