溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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>
<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()">發送
<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">在線人數 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();
//當客戶端連接服務器成功之后,向后臺發送一個消息，問一下現在有哪些在線用戶
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怎么實現聊天室有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
