Node.js websocket使用socket.io庫實(shí)現(xiàn)實(shí)時(shí)聊天室

2019-11-19 17:29:18

字體：大中小

供稿：網(wǎng)友

認(rèn)識(shí)websocket

WebSocket protocol 是HTML5一種新的協(xié)議。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信(full-duple)。一開始的握手需要借助HTTP請(qǐng)求完成。

其實(shí)websocket 并不是很依賴Http協(xié)議，它也擁有自己的一套協(xié)議機(jī)制，但在這里我們需要利用的socket.io 需要依賴到http 。
之前用java jsp寫過一個(gè)聊天，其實(shí)實(shí)現(xiàn)邏輯并不難，只是大部分時(shí)間都用在UI的設(shè)計(jì)上，其實(shí)現(xiàn)原理就是一個(gè)基于websocket的通信，要想做一個(gè)好的聊天室，我覺得大部分精力可能更應(yīng)該花在與用戶的視覺層交互上。

廢話不閑扯，我們先來看一下websocket 與傳統(tǒng)的ajax 有什么不同之處。
在之前，如果我們想要獲取到服務(wù)器更新的信息，我們可以使用ajax 輪詢來完成，然而，這樣做的弊端是增大了我們與服務(wù)器的交互次數(shù)，然而極大部分的交互都是無意義的，因?yàn)槲覀冎皇亲鲆粋€(gè)詢問，如果沒有任何新的信息，我們幾乎什么都不用做，因此這樣會(huì)極大的浪費(fèi)服務(wù)器資源和帶寬。
然而使用websocket 會(huì)使客戶端與服務(wù)器建立一個(gè)長連接，并且，當(dāng)服務(wù)器有新消息時(shí)可以主動(dòng)推送到客戶端，所以我們可以不用一次次的去詢問服務(wù)器是否有新消息，而是直接由服務(wù)器主動(dòng)推送到客戶端，這樣在無消息的狀態(tài)下，客戶端不會(huì)頻繁的去請(qǐng)求服務(wù)器。
使用websocket 的特點(diǎn)在于服務(wù)器可以主動(dòng)推送消息到客戶端。

使用socket.io 庫實(shí)現(xiàn)實(shí)時(shí)聊天

這也是這篇博文的主題之處。socket.io發(fā)布到npm 平臺(tái)上，我們可以直接用npm 來安裝到**當(dāng)前**node_modules目錄下。

npm install socket.io --save

下面我們就可以直接使用require 方法來將這個(gè)模塊引入

const socket = require("socket.io");

在創(chuàng)建此websocket 服務(wù)器之前，它需要依賴于一個(gè)已經(jīng)創(chuàng)建好的http服務(wù)器。

let socketServer = socket.listen(require("http").createServer((req,resp) => { //返回頁面 resp.end(require("fs").readFileSync("./socketIOTest1.html"));}).listen(9999,"localhost",() => {console.log("listening");}));

在上述代碼中socketIOTest1.html 是在當(dāng)前目錄下的一個(gè)html文件，在下面我會(huì)貼上詳細(xì)的代碼，這里先稍稍帶過。

在websocket 服務(wù)器對(duì)象中有一個(gè)connection事件，這個(gè)事件在有客戶端連接到socket服務(wù)器時(shí)被觸發(fā)。下面我們監(jiān)聽這個(gè)事件，打印一句話來表示有用戶連接。

//監(jiān)聽connection 事件socketServer.on("connection",socket => { console.log("有一用戶連接");}

上述代碼中，callback有一個(gè)參數(shù)socket為連接到客戶端的一個(gè)socket端口對(duì)象，這個(gè)對(duì)象有一個(gè)message 事件，當(dāng)客戶端有消息推送到服務(wù)器時(shí)，事件循環(huán)會(huì)取出這個(gè)事件與之對(duì)應(yīng)的回調(diào)函數(shù)并執(zhí)行。

socket.on("message",msg => { console.log(msg);});

同時(shí)，socket對(duì)象還可以監(jiān)聽disconnect 事件，來監(jiān)聽用戶斷開連接的情況

socket.on("disconnect",() => { console.log("有一用戶退出連接");});

因?yàn)槲覀冞@次的主題是要?jiǎng)?chuàng)建一個(gè)能夠?qū)崟r(shí)聊天的聊天室，因此光有這些是不夠的，我們還需要一個(gè)能夠與用戶交互的客戶端。
下面是我的socketIOTest代碼:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <textarea name="" id="content" cols="30" rows="10" ></textarea> <input id="write" type="text" placeholder="please write content here"> <input id="send" type="button" value="send" /> <script src="./socket.io/socket.io.js"></script> <script>  let send = document.getElementById("send");  let write = document.getElementById("write");  let content = document.getElementById("content");  let socket = io.connect();  //發(fā)送消息  send.onclick = () => {   let msg = write.value;   // content.innerHTML = content.value + msg + "/n";   socket.send(msg);  };  //接收到消息  socket.on("message",msg => {   console.log("從服務(wù)器接收到的消息 ： " + msg);   //更新內(nèi)容   content.innerHTML = content.value + msg + "/n";  });  socket.on("disconnect",() => {   console.log("與服務(wù)器斷開連接");  }); </script></body></html>

在上述代碼中，我用script標(biāo)簽引入了一個(gè)socket.io.js文件，這個(gè)文件不需要另外去下載，而直接引入即可，因?yàn)閟ocket.io.js是被包含于socket.io模塊中，在上面node的程序代碼中，我們通過require方法引入了socket.io模塊，因此我們可以直接通過相對(duì)路徑訪問到它。

<script src="./socket.io/socket.io.js"></script>

接下來我們就可以在script標(biāo)簽中使用如同服務(wù)端的代碼。

let socket = io.connect();

使用io.connect()方法連接到websocket服務(wù)器，該方法返回一個(gè)與連接的服務(wù)器與之對(duì)應(yīng)的一個(gè)socket端口對(duì)象。

下面我們同樣監(jiān)聽message 和 disconnect事件。

//接收到消息socket.on("message",msg => { console.log("從服務(wù)器接收到的消息 ： " + msg); //更新內(nèi)容 content.innerHTML = content.value + msg + "/n";});socket.on("disconnect",() => { console.log("與服務(wù)器斷開連接");});

為了更能突出websocket的作用，在html代碼中，我只使用了一個(gè)textarea標(biāo)簽來顯示內(nèi)容，兩個(gè)input標(biāo)簽用于發(fā)送。
使用socket對(duì)象的send方法就能使消息在服務(wù)器與客戶端進(jìn)行消息傳遞。

websocket群聊實(shí)現(xiàn)

現(xiàn)在我們假設(shè)一個(gè)場景，有u1和u2兩個(gè)用戶，同時(shí)連接到服務(wù)器，那么我們怎么使他們互相通信呢，實(shí)現(xiàn)的方法及其簡單。當(dāng)u1連接到服務(wù)器，在服務(wù)器中，使用一個(gè)map鍵值對(duì)把與u1對(duì)應(yīng)的socket對(duì)象進(jìn)行保存。

//創(chuàng)建一個(gè)用于放置用戶對(duì)象的maplet map = new Map();//用于記錄用戶數(shù)量的變量,并初始化為0let userCount = 0;//監(jiān)聽connection 事件socketServer.on("connection",socket => { console.log("有一用戶連接"); map.set(++userCount,socket); //...});

與此同時(shí)，u2也連接上服務(wù)器，也由該map把與u2與之對(duì)應(yīng)的socket對(duì)象進(jìn)行儲(chǔ)存。
現(xiàn)在，u1點(diǎn)擊了send按鈕發(fā)送一條消息至服務(wù)器，服務(wù)器收到消息后遍歷map，轉(zhuǎn)發(fā)給所有socket對(duì)象，實(shí)現(xiàn)群聊的實(shí)時(shí)通信。

socketServer.on("connection",socket => { console.log("有一用戶連接"); map.set(++userCount,socket); //監(jiān)聽客戶端來的信息 socket.on("message",msg => {  //從客戶端接收的消息  //遍歷所有用戶  map.forEach((value,index,arr) => {   value.send(msg);  }); });});

下面我貼上服務(wù)端的完整代碼，僅供參考

const socket = require("socket.io");//創(chuàng)建一個(gè)websocket服務(wù)器let socketServer = socket.listen(require("http").createServer((req,resp) => { //返回頁面 resp.end(require("fs").readFileSync("./socketIOTest1.html"));}).listen(9999,"localhost",() => {console.log("listening");}));//創(chuàng)建一個(gè)用于放置用戶對(duì)象的maplet map = new Map();//用于記錄用戶數(shù)量的變量,并初始化為0let userCount = 0;//監(jiān)聽connection 事件socketServer.on("connection",socket => { console.log("有一用戶連接"); map.set(++userCount,socket); //監(jiān)聽客戶端來的信息 socket.on("message",msg => {  //從客戶端接收的消息  //遍歷所有用戶  map.forEach((value,index,arr) => {   value.send(msg);  }); }); //監(jiān)聽客戶端退出情況 socket.on("disconnect",() => {  console.log("有一用戶退出連接"); });});

websocket私聊實(shí)現(xiàn)

在說私聊的實(shí)現(xiàn)之前，我們首先要找到對(duì)于每一個(gè)用戶的唯一標(biāo)識(shí)，在通常的項(xiàng)目開發(fā)中，我們都使用用戶的用戶名進(jìn)行標(biāo)識(shí)，每個(gè)用戶通過注冊獲得與之對(duì)應(yīng)的用戶名。將用戶名保存在數(shù)據(jù)庫中利用主鍵防止重復(fù)。

實(shí)現(xiàn)私聊的方法有很多種，這里我的實(shí)現(xiàn)方法是這樣的：

① 當(dāng)用戶連接時(shí)，把用戶的socket端口對(duì)象使用map進(jìn)行儲(chǔ)存，儲(chǔ)存的key 為用戶的socket對(duì)象，value為用戶的用戶名，寫一個(gè)方法用于更新客戶端列表
② 用戶默認(rèn)用戶名為 <未命名>，指定自定義用戶名時(shí)，使用socket.emit方法觸發(fā)服務(wù)端的某個(gè)事件，遍歷map找到與之對(duì)應(yīng)的key，進(jìn)行value修改
③ 發(fā)送消息時(shí)，根據(jù)選擇列表來指定要發(fā)送的人，在服務(wù)端，遍歷map，找到要發(fā)送到的用戶名，進(jìn)行發(fā)送，同時(shí)更新到自己的聊天框

以上就是私聊的簡單實(shí)現(xiàn)。

下面看一下具體代碼：

//Node.jsconst socket = require("socket.io");//創(chuàng)建一個(gè)websocket服務(wù)器let socketServer = socket.listen(require("http").createServer((req,resp) => { //返回頁面 resp.end(require("fs").readFileSync("./socketIOTest1.html"));}).listen(9999,"localhost",() => {console.log("listening");}));//創(chuàng)建一個(gè)用于放置用戶對(duì)象的maplet map = new Map();//用于記錄用戶數(shù)量的變量,并初始化為0let userCount = 0;//遍歷map let scanMap = func => { try{  map.forEach((value,index,arr) => {   func(value,index,arr);  }); } catch(e){  if(e.message == "break"){   return;  }  else{   throw e;  } }}//通知客戶端彈出對(duì)話框let showDialog = (socket,msg) => { socket.emit("showDialog",msg);}//更新用戶列表let updateList = socket => { let userArr = []; scanMap((value,index) => {  if(value != undefined){   userArr.push(value);  } }); socket.emit("newUser",userArr);}//監(jiān)聽connection 事件socketServer.on("connection",socket => { console.log("有一用戶連接"); //初始化存儲(chǔ)當(dāng)前socket對(duì)象 map.set(socket,"<未命名>"); //將用戶信息寫入map socket.on("getUser",user => {  //修改名稱  map.set(socket,user);  scanMap((value,index) => {   updateList(index);  }); }); //通知所有客戶端更新列表 scanMap((value,index) => {  updateList(index); }); //監(jiān)聽客戶端來的信息 socket.on("message",msg => {  //從客戶端接收的消息  let sender;  //遍歷所有用戶  scanMap((value,index) => {   if(index == socket){    sender = value;   }  });  scanMap((value,index) => {   if(msg.person == "all"){    index.send(sender + " : " + msg.msg);   }   else if(msg.person == value){    socket.send(sender + " : " +msg.msg);    index.send(sender + " : " +msg.msg);    throw new Error("break");   }  }); }); //監(jiān)聽客戶端退出情況 socket.on("disconnect",() => {  //用戶退出，從map里刪除該用戶  map.set(socket,undefined);  //通知所有用戶更新列表  scanMap((value,index) => {   updateList(index);  });  console.log("有一用戶退出連接"); });});

客戶端：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <textarea name="" id="content" cols="30" rows="10" ></textarea> <input id="write" type="text" placeholder="please write content here"> <input id="send" type="button" value="send" /> <input type="text" id="user" placeholder="user"> <select style="width: 100px;" size="2" name="" id="userList">  <option value="all">群聊</option> </select> <script src="./socket.io/socket.io.js"></script> <script>  let send = document.getElementById("send");  let write = document.getElementById("write");  let content = document.getElementById("content");  let user = document.getElementById("user");  //用戶列表  let userList = document.getElementById("userList");  let socket = io.connect();  //判斷用戶名是否為空  let isUserEmpty = () => {   if(user.value == ""){    alert("請(qǐng)?zhí)顚懹脩裘?);    return false;   }   else {    return true;   }  }  //監(jiān)聽用戶名變化  let oldUser;  user.onblur = () => {   if(isUserEmpty()){    //防止重復(fù)發(fā)射    if(oldUser == user.value){return;}    oldUser = user.value;    socket.emit("getUser",user.value);   }  }    //發(fā)送消息  send.onclick = () => {   if(isUserEmpty()){    let msg = write.value;    // content.innerHTML = content.value + msg + "/n";    socket.send({msg:msg,person:userList.value});   }   if(select.value == ""){    alert("請(qǐng)選擇一個(gè)聊天對(duì)象");   }  };  //接收到消息  socket.on("message",msg => {   console.log("從服務(wù)器接收到的消息 ： " + msg);   //更新內(nèi)容   content.innerHTML = content.value + msg + "/n";  });  socket.on("disconnect",() => {   console.log("與服務(wù)器斷開連接");  });  //新用戶加入聊天室  socket.on("newUser",arr => {   userList.innerHTML = "";   let all = document.createElement("option");   all.innerHTML = "群聊";   all.setAttribute("value","all");   userList.appendChild(all);   //添加新用戶   arr.forEach((value,index) => {    console.log("value :" + value + "index :" + index);    let option = document.createElement("option");    option.innerHTML = value;    option.setAttribute("value",value);    userList.appendChild(option);    userList.setAttribute("size",userList.children.length);   });   //默認(rèn)選中群聊   userList.value = "all";  });  //接收服務(wù)器需要彈出對(duì)話框的需求  socket.on("showDialog",msg => {   alert(msg);  }); </script></body></html>