這篇文章給大家介紹怎么在node.js中使用socket.io實現(xiàn)一個實時通訊應(yīng)用，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
創(chuàng)新互聯(lián)服務(wù)項目包括海鹽網(wǎng)站建設(shè)、海鹽網(wǎng)站制作、海鹽網(wǎng)頁制作以及海鹽網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，海鹽網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到海鹽省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
WebSocket概念
不同于HTTP半雙工協(xié)議，WebSocket是基于TCP 連接的全雙工協(xié)議，支持客戶端服務(wù)端雙向通信。
WebSocket使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單，允許服務(wù)端主動向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。
在WebSocket API中，瀏覽器和服務(wù)器只需要做一個握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。
實現(xiàn)
原生實現(xiàn)
WebSocket對象一共支持四個消息 onopen, onmessage, onclose和onerror。
建立連接
通過javascript可以快速的建立一個WebSocket連接：
var Socket = new WebSocket(url, [protocol] );
以上代碼中的第一個參數(shù)url, 指定連接的URL。第二個參數(shù) protocol是可選的，指定了可接受的子協(xié)議。
同http協(xié)議使用http://開頭一樣，WebSocket協(xié)議的URL使用ws://開頭，另外安全的WebSocket協(xié)議使用wss://開頭。
當(dāng)Browser和WebSocketServer連接成功后，會觸發(fā)onopen消息。
重慶分公司
重慶分公司
Socket.onopen = function(evt) {};如果連接失敗，發(fā)送、接收數(shù)據(jù)失敗或者處理數(shù)據(jù)出現(xiàn)錯誤，browser會觸發(fā)onerror消息。
Socket.onerror = function(evt) { };當(dāng)Browser接收到WebSocketServer端發(fā)送的關(guān)閉連接請求時，就會觸發(fā)onclose消息。
Socket.onclose = function(evt) { };收發(fā)消息
當(dāng)Browser接收到WebSocketServer發(fā)送過來的數(shù)據(jù)時，就會觸發(fā)onmessage消息，參數(shù)evt中包含server傳輸過來的數(shù)據(jù)。
Socket.onmessage = function(evt) { };send用于向服務(wù)端發(fā)送消息。
Socket.send();
socket
WebSocket是跟隨HTML5一同提出的，所以在兼容性上存在問題，這時一個非常好用的庫就登場了——Socket.io。
socket.io封裝了websocket，同時包含了其它的連接方式，你在任何瀏覽器里都可以使用socket.io來建立異步的連接。socket.io包含了服務(wù)端和客戶端的庫，如果在瀏覽器中使用了socket.io的js，服務(wù)端也必須同樣適用。
socket.io是基于 Websocket 的Client-Server 實時通信庫。
socket.io底層是基于engine.io這個庫。engine.io為 socket.io 提供跨瀏覽器/跨設(shè)備的雙向通信的底層庫。engine.io使用了 Websocket 和 XHR 方式封裝了一套 socket 協(xié)議。在低版本的瀏覽器中，不支持Websocket，為了兼容使用長輪詢(polling)替代。
API文檔
Socket.io允許你觸發(fā)或響應(yīng)自定義的事件，除了connect，message，disconnect這些事件的名字不能使用之外，你可以觸發(fā)任何自定義的事件名稱。
建立連接
const socket = io("ws://0.0.0.0:port"); // port為自己定義的端口號
let io = require("socket.io")(http);
io.on("connection", function(socket) {})消息收發(fā)
一、發(fā)送數(shù)據(jù)
socket.emit(自定義發(fā)送的字段, data);
二、接收數(shù)據(jù)
socket.on(自定義發(fā)送的字段, function(data) {
console.log(data);
})斷開連接
一、全部斷開連接
let io = require("socket.io")(http);
io.close();二、某個客戶端斷開與服務(wù)端的鏈接
// 客戶端
socket.emit("close", {}); // 服務(wù)端
socket.on("close", data => {
socket.disconnect(true);
});room和namespace
有時候websocket有如下的使用場景：1.服務(wù)端發(fā)送的消息有分類，不同的客戶端需要接收的分類不同；2.服務(wù)端并不需要對所有的客戶端都發(fā)送消息，只需要針對某個特定群體發(fā)送消息；
針對這種使用場景，socket中非常實用的namespace和room就上場了。
先來一張圖看看namespace與room之間的關(guān)系：
namespace
服務(wù)端
io.of("/post").on("connection", function(socket) {
socket.emit("new message", { mess: `這是post的命名空間` });
});
io.of("/get").on("connection", function(socket) {
socket.emit("new message", { mess: `這是get的命名空間` });
});客戶端
// index.js
const socket = io("ws://0.0.0.0:****/post");
socket.on("new message", function(data) {
console.log('index',data);
}
//message.js
const socket = io("ws://0.0.0.0:****/get");
socket.on("new message", function(data) {
console.log('message',data);
}room
客戶端
//可用于客戶端進(jìn)入房間;
socket.join('room one');
//用于離開房間;
socket.leave('room one');服務(wù)端
io.sockets.on('connection',function(socket){
//提交者會被排除在外（即不會收到消息）
socket.broadcast.to('room one').emit('new messages', data);
// 向所有用戶發(fā)送消息
io.sockets.to(data).emit("recive message", "hello,房間中的用戶");
}用socket.io實現(xiàn)一個實時接收信息的例子
終于來到應(yīng)用的階段啦，服務(wù)端用node.js模擬了服務(wù)端接口。以下的例子都在本地服務(wù)器中實現(xiàn)。
服務(wù)端
先來看看服務(wù)端，先來開啟一個服務(wù)，安裝express和socket.io
安裝依賴
npm install --Dev express npm install --Dev socket.io
構(gòu)建node服務(wù)器
let app = require("express")();
let http = require("http").createServer(handler);
let io = require("socket.io")(http);
let fs = require("fs");
http.listen(port); //port:輸入需要的端口號
function handler(req, res) {
fs.readFile(__dirname + "/index.html", function(err, data) {
if (err) {
res.writeHead(500);
return res.end("Error loading index.html");
}
res.writeHead(200);
res.end(data);
});
}
io.on("connection", function(socket) {
console.log('連接成功');
//連接成功之后發(fā)送消息
socket.emit("new message", { mess: `初始消息` });
});客戶端
核心代碼——index.html（向服務(wù)端發(fā)送數(shù)據(jù)）
