html5新技术socket.io实现聊天室的方法

!DOCTYPE htML>
    html>
    head>
        meta charset="UTF-8">
        tITle>
    1/title>
        link rel="stylesheet" href="https://cdn.bootcss.COM/bootstrap/3.3.7/css/bootstrap.min.css">
        style>
        .user{
                color:lightskyblue;
                cursor: pointer;
        }
        /style>
    /head>
    body>
    div>
        div>
            div>
                div class="panel panel-default">
                    div>
                        h4>
    欢迎来老王聊天室/h4>
                    /div>
                    div>
                        ul id="messageUl">
                        /ul>
                    /div>
                    div>
                        div>
                            div>
                                input id="txtMsg" type="text" onkeydown="handleKeyDown(event)">
                            /div>
                            div>
                                button class="BTn btn-default" onclick="send()">
    发送                                span class="glyphicon glyphicon-send">
    /span>
                                /button>
                            /div>
                        /div>
                    /div>
                /div>
            /div>
            div>
                div class="panel panel-default">
                    div>
                        h4>
    在线用户/h4>
                    /div>
                    div>
                        ul id="userUl">
    /ul>
                    /div>
                    div>
                        h4 id="onlineUsers">
    在线人数 0/h4>
                    /div>
                /div>
            /div>
        /div>
    /div>
    script src="/socket.io/socket.io.js">
    /script>
    script>
        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}
     span>
${
new Date(msgObj.createAt).toLocaleString()}
    /span>
    `;
            messageUl.appendChild(li);
    }
    );
    socket.on('userList',function(userList){
            userUl.innerHTML =  userList.map(item=>
    (            `li>
${
item}
    /li>
    `        )).join('');
            countUser();
    }
    );
    socket.on('user-added',function(username){
            let li = document.createElement('li');
            li.className = 'list-group-item';
            li.innerHTML = `span>
${
username}
    /span>
    `;
            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}
     `;
        }
    }
    )/script>
    /body>
    /html>
    !--npm i exPress socket.io -S -->
    

后台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实现聊天室的方法的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！