html5新技術(shù)socket.io怎么實現(xiàn)聊天室

小編給大家分享一下html5新技術(shù)socket.io怎么實現(xiàn)聊天室，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

10年積累的成都做網(wǎng)站、網(wǎng)站建設(shè)經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務。我雖然不認識你，你也不認識我。但先做網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有上饒免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

<!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>
                    <h5>歡迎來老王聊天室</h5>
                </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()">發(fā)送
                                <span class="glyphicon glyphicon-send"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="panel panel-default">
                <div>
                    <h5>在線用戶</h5>
                </div>
                <div>
                    <ul id="userUl"></ul>
                </div>
                <div>
                    <h5 id="onlineUsers">在線人數(shù) 0</h5>
                </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();
    //當客戶端連接服務器成功之后,向后臺發(fā)送一個消息，問一下現(xiàn)在有哪些在線用戶
    socket.on('connect',function(){
        socket.emit('users');
    });
    let messageUl = document.querySelector('#messageUl');
    let userUl = document.querySelector('#userUl');
    //監(jiān)聽服務器發(fā)過來的消息
    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 = `在線人數(shù) ${userUl.children.length}`;
    }
    //發(fā)送事件
    function send(){
        let content = txtMsg.value;//先拿到聊天的內(nèi)容
        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對應關(guān)系
let clients = {};
//監(jiān)聽客戶端的連接，當連接到來的時候執(zhí)行此回調(diào)函數(shù)
io.on('connection',function(socket){
    //在函數(shù)的內(nèi)部聲明一個變量，叫username
    let username;
    //監(jiān)聽客戶端的發(fā)過來的消息，當消息發(fā)過來的時候執(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ā)言，向所有的客戶端進行廣播
                io.emit('message',{
                    username,content:data,createAt:new Date()
                });
            }
        }else{
            username = data;//把這個消息當成用戶名
            //關(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ā)過來的請求，把用戶數(shù)組返回
    socket.on('users',function(){
        let userList = Object.keys(clients);
        socket.emit('userList',userList);
    });
});
server.listen(8080);
/**
 * 1.實現(xiàn)匿名聊天
 *   1. 在客戶端里連接上服務器
 *   2. 給發(fā)送按鈕綁定點擊事件，當點擊此按鈕的時候先獲取文本框的內(nèi)容，把文本框的內(nèi)容發(fā)送到后臺
 *   3. 后臺服務器把此消息廣播給所有的客戶端。
 *   4. 所有的客戶端收到消息后把此消息在ul列表里顯示出來
 * 2.實現(xiàn)具名聊天
 *   1. 當此用戶第一次向服務器發(fā)消息的時候
 *   2. 服務器會判斷此客戶端的用戶名是否設(shè)置過，如果沒設(shè)置的話就把這個消息當成用戶名，以后再發(fā)消息的話都會以這個作為用戶名,如果設(shè)置過了就是正常發(fā)言
 * 3. 私聊
 *   1. 點擊某個在線用戶，點擊后會在輸入框里出現(xiàn)  @xxx yyy
 *   2. 服務收到私聊的請求后會找到xxx對應的客戶端向他單個發(fā)消息
 *   3
 *
*/

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

網(wǎng)頁標題：html5新技術(shù)socket.io怎么實現(xiàn)聊天室
網(wǎng)站鏈接：http://chinadenli.net/article40/jggsho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務器托管、商城網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站營銷、品牌網(wǎng)站建設(shè)、虛擬主機

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

html5新技術(shù)socket.io怎么實現(xiàn)聊天室