html5中關于socket.io實作一個聊天室的示例代碼
1
.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} `;
}
})
背景nodelet 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);