??前言

上篇文章中結(jié)合websokcet進(jìn)行了簡(jiǎn)單的聊天小案例，但是我們可以發(fā)現(xiàn)使用ws模塊來(lái)寫代碼的時(shí)候未免有一些繁瑣，需要我們自己去設(shè)置type,使用socket.io后事件監(jiān)聽將會(huì)十分的簡(jiǎn)單便捷，很好的彌補(bǔ)了ws模塊的缺陷。

Socket.IO的定義

Socket.IO是一個(gè)WebSocket庫(kù)，包括了客戶端的js和服務(wù)器端的node.js，它的目標(biāo)是構(gòu)建可以在不同瀏覽器和移動(dòng)設(shè)備上使用的實(shí)時(shí)應(yīng)用。

Socket.IO將WebSocket、AJAX和其它的通信方式全部封裝成了統(tǒng)一的通信接口，也就是說(shuō)，我們?cè)谑褂肧ocketIO時(shí)，不用擔(dān)心兼容問(wèn)題，底層會(huì)自動(dòng)選用最佳的通信方式。

Socket.IO的優(yōu)點(diǎn)

• socket.io封裝了服務(wù)端和客戶端，使用起來(lái)非常簡(jiǎn)單方便。
• socket.io支持跨平臺(tái)，這就意味著你有了更多的選擇，可以在自己喜歡的平臺(tái)下開發(fā)實(shí)時(shí)應(yīng)用。
• socket.io可以自定義事件發(fā)送到對(duì)端，對(duì)端可以是服務(wù)器，可以是客戶端；使用emit發(fā)送，接收還是on。
• 它會(huì)自動(dòng)根據(jù)瀏覽器從WebSocket、AJAX長(zhǎng)輪詢、Iframe流等等各種方式中選擇最佳的方式來(lái)實(shí)現(xiàn)網(wǎng)絡(luò)實(shí)時(shí)應(yīng)用，非常方便和人性化，而且支持的瀏覽器最低達(dá)IE5.5。如果不支持websocket，可以自動(dòng)降級(jí)為輪詢

node中安裝Socket.IO

打開終端，在終端中輸入以下代碼即可安裝Socket.IO模塊:

npm i socket.io

node中使用Socket.IO

emit 和 on 是最重要的兩個(gè)api，分別對(duì)應(yīng) 發(fā)送 和 監(jiān)聽 事件.

我們可以非常自由的在服務(wù)端定義并發(fā)送一個(gè)事件emit，然后在客戶端監(jiān)聽 on，反過(guò)來(lái)也一樣。

發(fā)送的內(nèi)容格式也非常自由，既可以是基本數(shù)據(jù)類型 Number，String，Boolean 等，也可以是 Object，Array 類型，甚至還可以是函數(shù)。而用回調(diào)函數(shù)的方式則可以進(jìn)行更便攜的交互。

emit

socket.emit(eventName[, ...args])：發(fā)射（觸發(fā)）一個(gè)事件

socket.emit('aaa','你好，前臺(tái)')

在這里以服務(wù)端為例子:在服務(wù)端中通過(guò)socket.emit()方法創(chuàng)立一個(gè)事件(第一個(gè)參數(shù):自定義事件)aaa,發(fā)送的信息(第二個(gè)參數(shù)) 你好，前臺(tái).

注意： 第二個(gè)參數(shù)可以傳對(duì)象，因?yàn)樵?code>emit方法內(nèi)部帶有JSON.stringfy()方法，自動(dòng)將對(duì)象轉(zhuǎn)化為字符串。

on

socket.on(eventName, callback)：監(jiān)聽一個(gè) emit 發(fā)射的事件

socket.on('aaa',(msg)=>{
	console.log(msg)
})

在這里以客戶端為例，客戶端監(jiān)聽服務(wù)端的事件aaa，隨后通過(guò)回調(diào)函數(shù)的方式打印出aaa傳過(guò)來(lái)的信息。

在express中引入使用

服務(wù)端

const server = require('http').createServer(app);
const io = require('socket.io')(server);
io.on('connection', socket => {
	console.log('恭喜你連接成功！')
	socket.on("message",(msg)=>{
		console.log(msg)  //你好 后臺(tái)
		//注意 ： 這里的 io.emit() 是默認(rèn)轉(zhuǎn)發(fā)給全部客戶端信息，所有客戶端都可以收到
		io.emit("allMsg","廣播 : 歡迎來(lái)到聊天室")
	})
});
server.listen(3000);

將server當(dāng)作參數(shù)傳入，目的在于說(shuō)明io掛載的服務(wù)依舊是基于http的。
這里的代碼表示，只要連接成功,就會(huì)打印連接成功的信息！

客戶端

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();  //默認(rèn)連接服務(wù)端啟動(dòng)的本地端口地址
  socket.emit("message","你好 后臺(tái)")
  // 監(jiān)聽服務(wù)端的廣播事件，接收廣播的消息
  socket.on("allMsg",(msg)=>{
		console.log(msg)  //廣播 : 歡迎來(lái)到聊天室
  })
</script>

在客戶端需要單獨(dú)引用socket.io.js文件，因?yàn)閟ocket.io不是瀏覽器內(nèi)置模塊，需要單獨(dú)引用，js文件內(nèi)部代碼 ==> socket.io.js內(nèi)部代碼，將這里的代碼復(fù)制到自己創(chuàng)建的js文件中，然后在客戶端中引用。
只要在客戶端中出現(xiàn)const socket = io(),瀏覽器將會(huì)直接默認(rèn)連接到客戶端啟動(dòng)的本地服務(wù)地址。

小結(jié)

socket.io這個(gè)第三方模塊相對(duì)來(lái)說(shuō)，書寫代碼的時(shí)候更加的方便與高效，在ws模塊中通過(guò)switch分支來(lái)進(jìn)行對(duì)不同的聊天類型進(jìn)行不同的方法呈現(xiàn)，而在socket.io模塊中僅僅通過(guò)自定義事件就可以解決這個(gè)問(wèn)題，并且socket.io可以在服務(wù)器斷開后，當(dāng)你再次進(jìn)入客戶端后可以自動(dòng)連接，整體的表現(xiàn)優(yōu)于ws模塊。

到此這篇關(guān)于node.js中優(yōu)雅的使用Socket.IO模塊的文章就介紹到這了,更多相關(guān)node.js使用Socket.IO模塊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論