淺析node中如何優雅使用Socket.IO模組

2022-11-22 22:00:51
中如何使用Socket.IO模組?下面本篇文章就來給大家介紹一下在node.js中優雅使用Socket.IO模組的方法,希望對大家有所幫助!

node.js極速入門課程:進入學習

Socket.IO的定義

Socket.IO是一個WebSocket庫,包括了使用者端的js伺服器端的node.js,它的目標是構建可以在不同瀏覽器和移動裝置上使用的實時應用。【相關教學推薦:】

Socket.IO將WebSocket、AJAX和其它的通訊方式全部封裝成了統一的通訊介面,也就是說,我們在使用SocketIO時,不用擔心相容問題,底層會自動選用最佳的通訊方式


Socket.IO的優點

  • socket.io封裝了伺服器端和使用者端,使用起來非常簡單方便。

  • socket.io支援跨平臺,這就意味著你有了更多的選擇,可以在自己喜歡的平臺下開發實時應用。

  • socket.io可以自定義事件傳送到對端,對端可以是伺服器,可以是使用者端;使用emit傳送,接收還是on

  • 它會自動根據瀏覽器從WebSocket、AJAX長輪詢、Iframe流等等各種方式中選擇最佳的方式來實現網路實時應用,非常方便和人性化,而且支援的瀏覽器最低達IE5.5。如果不支援websocket,可以自動降級為輪詢

node中安裝Socket.IO

開啟終端,在終端中輸入以下程式碼即可安裝Socket.IO模組:

npm i socket.io
登入後複製

node中使用Socket.IO

emiton 是最重要的兩個api,分別對應 傳送監聽 事件.

我們可以非常自由的在伺服器端定義並傳送一個事件emit,然後在使用者端監聽 on,反過來也一樣。

傳送的內容格式也非常自由,既可以是基本資料型別 Number,String,Boolean 等,也可以是 Object,Array 型別,甚至還可以是函數。而用回撥函數的方式則可以進行更便攜的互動。

emit

socket.emit(eventName[, ...args])發射(觸發)一個事件

socket.emit('aaa','你好,前臺')
登入後複製

在這裡以伺服器端為例子:在伺服器端中通過socket.emit()方法創立一個事件(第一個引數:自定義事件)aaa,傳送的資訊(第二個引數) 你好,前臺.

注意: 第二個引數可以傳物件,因為在emit方法內部帶有JSON.stringfy()方法,自動將物件轉化為字串。

on

socket.on(eventName, callback)監聽一個 emit 發射的事件

socket.on('aaa',(msg)=>{
	console.log(msg)
})
登入後複製

在這裡以使用者端為例,使用者端監聽伺服器端的事件aaa,隨後通過回撥函數的方式列印出aaa傳過來的資訊。


在express中引入使用

伺服器端

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)  //你好 後臺
		//注意 : 這裡的 io.emit() 是預設轉發給全部使用者端資訊,所有使用者端都可以收到
		io.emit("allMsg","廣播 : 歡迎來到聊天室")
	})
});
server.listen(3000);
登入後複製

server當作引數傳入,目的在於說明io掛載的服務依舊是基於http的。
這裡的程式碼錶示,只要連線成功,就會列印連線成功的資訊!


使用者端

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();  //預設連線伺服器端啟動的本地埠地址
  socket.emit("message","你好 後臺")
  // 監聽伺服器端的廣播事件,接收廣播的訊息
  socket.on("allMsg",(msg)=>{
		console.log(msg)  //廣播 : 歡迎來到聊天室
  })
</script>
登入後複製

在使用者端需要單獨參照socket.io.js檔案,因為socket.io不是瀏覽器內建模組,需要單獨參照,js檔案內部程式碼 ==> ,將這裡的程式碼複製到自己建立的js檔案中,然後在使用者端中參照。
只要在使用者端中出現const socket = io(),瀏覽器將會直接預設連線到使用者端啟動的本地服務地址。


小結

socket.io這個第三方模組相對來說,書寫程式碼的時候更加的方便與高效,在ws模組中通過switch分支來進行對不同的聊天型別進行不同的方法呈現,而在socket.io模組中僅僅通過自定義事件就可以解決這個問題,並且socket.io可以在伺服器斷開後,當你再次進入使用者端後可以自動連線,整體的表現優於ws模組。

更多node相關知識,請存取:!

以上就是淺析node中如何優雅使用Socket.IO模組的詳細內容,更多請關注TW511.COM其它相關文章!