後臺node ...
<!DOCTYPE html> <html lang="en"> <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 class="container"> <div class="row"> <div class="col-md-9"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="text-center">歡迎來老王聊天室</h4> </div> <div class="panel-body"> <ul class="list-group" id="messageUl"> </ul> </div> <div class="panel-footer"> <div class="row"> <div class="col-md-10"> <input id="txtMsg" class="form-control" type="text" onkeydown="handleKeyDown(event)"> </div> <div class="col-md-2"> <button class="btn btn-default" onclick="send()">發送 <span class="glyphicon glyphicon-send"></span> </button> </div> </div> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading"> <h4>線上用戶</h4> </div> <div class="panel-body"> <ul class="list-group" id="userUl"></ul> </div> <div class="panel-footer"> <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 class="pull-right">${new Date(msgObj.createAt).toLocaleString()}</span>`; messageUl.appendChild(li); }); socket.on('userList',function(userList){ userUl.innerHTML = userList.map(item=>( `<li class="list-group-item">${item}</li>` )).join(''); countUser(); }); socket.on('user-added',function(username){ let li = document.createElement('li'); li.className = 'list-group-item'; li.innerHTML = `<span class="user">${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
*
*/
