小編給大家分享一下html5中socket.io如何實(shí)現(xiàn)一個(gè)聊天室，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

站在用戶的角度思考問題，與客戶深入溝通，找到渾源網(wǎng)站設(shè)計(jì)與渾源網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋渾源地區(qū)。

 html5中關(guān)于socket.io實(shí)現(xiàn)一個(gè)聊天室的示例代碼

    
    
    
    



    

        

            

                

                    
歡迎來老王聊天室
                
                

                    


                    
                
                

                    

                        

                            
                        
                        

                            發(fā)送
                                
                            
                        
                    
                
            
        
        

            

                

                    
在線用戶
                
                

                    

                
                

                    
在線人數(shù) 0
                
            
        
    

后臺(tái)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服務(wù)器
let io = require('socket.io')(server);
//聲明一個(gè)對(duì)象，保存所有的客戶端用戶名和它們的socket對(duì)應(yīng)關(guān)系
let clients = {};
//監(jiān)聽客戶端的連接，當(dāng)連接到來的時(shí)候執(zhí)行此回調(diào)函數(shù)
io.on('connection',function(socket){
    //在函數(shù)的內(nèi)部聲明一個(gè)變量，叫username
    let username;
    //監(jiān)聽客戶端的發(fā)過來的消息，當(dāng)消息發(fā)過來的時(shí)候執(zhí)行回調(diào)函數(shù)
    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{//沒匹配上
                //正常發(fā)言，向所有的客戶端進(jìn)行廣播
                io.emit('message',{
                    username,content:data,createAt:new Date()
                });
            }
        }else{
            username = data;//把這個(gè)消息當(dāng)成用戶名
            //關(guān)聯(lián)起來
            clients[username]= socket;
            //向所有的客戶端廣播說有新的用戶加入聊天室
            io.emit('message',{
                username:'系統(tǒng)',content:`歡迎 ${username} 加入聊天室`,createAt:new Date()
            });
            //事件的名字可以自定義
            io.emit('user-added',username);
        }
    });
    //監(jiān)聽客戶端發(fā)過來的請(qǐng)求，把用戶數(shù)組返回
    socket.on('users',function(){
        let userList = Object.keys(clients);
        socket.emit('userList',userList);
    });
});
server.listen(8080);

/**
 * 1.實(shí)現(xiàn)匿名聊天
 *   1. 在客戶端里連接上服務(wù)器
 *   2. 給發(fā)送按鈕綁定點(diǎn)擊事件，當(dāng)點(diǎn)擊此按鈕的時(shí)候先獲取文本框的內(nèi)容，把文本框的內(nèi)容發(fā)送到后臺(tái)
 *   3. 后臺(tái)服務(wù)器把此消息廣播給所有的客戶端。
 *   4. 所有的客戶端收到消息后把此消息在ul列表里顯示出來
 * 2.實(shí)現(xiàn)具名聊天
 *   1. 當(dāng)此用戶第一次向服務(wù)器發(fā)消息的時(shí)候
 *   2. 服務(wù)器會(huì)判斷此客戶端的用戶名是否設(shè)置過，如果沒設(shè)置的話就把這個(gè)消息當(dāng)成用戶名，以后再發(fā)消息的話都會(huì)以這個(gè)作為用戶名,如果設(shè)置過了就是正常發(fā)言
 * 3. 私聊
 *   1. 點(diǎn)擊某個(gè)在線用戶，點(diǎn)擊后會(huì)在輸入框里出現(xiàn)  @xxx yyy
 *   2. 服務(wù)收到私聊的請(qǐng)求后會(huì)找到xxx對(duì)應(yīng)的客戶端向他單個(gè)發(fā)消息
 *   3
 *
*/

看完了這篇文章，相信你對(duì)html5中socket.io如何實(shí)現(xiàn)一個(gè)聊天室有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！