一、介紹
本文的服務端是使用nodejs,前端是使用nodejs+vue。學習socket之前,我們先了解下網絡七層是哪七層,而socket又是位於哪?
網絡七層:
應用層表示層會話層傳輸層網絡層數據鏈路層物理層而socket位於應用層與傳輸層之間,簡寫SSL(Secure Sockets Layer 安全套接層),而其繼任者傳輸層安全(Transport Layer Security,TLS)是為網絡通信提供安全及數據完整性的一種安全協議。TLS與SSL在傳輸層對網絡連接進行加密。
二、Socket.IO 是什么
Socket.IO是一個庫,基於 Node.js 的實時應用程序框架。可以在瀏覽器和服務器之間實現實時,雙向和基於事件的通信。它適用於每個平台、瀏覽器或設備,同樣注重可靠性和速度。它包括:
Node.js 服務器瀏覽器的Javascript客戶端庫(也可以從Node.js運行)
三、起源
WebSocket 的產生源於 Web 開發中日益增長的實時通信需求,對比基於 http 的輪詢方式,它大大節省了網絡帶寬,同時也降低了服務器的性能消耗。
WebSocket 協議在2008年誕生,2011年成為國際標准。雖然主流瀏覽器都已經支持,但仍然可能有不兼容的情況,為了兼容所有瀏覽器,就誕生SocketIO。
SocketIO將WebSocket、AJAX和其它的通信方式全部封裝成了統一的通信接口,也就是說,我們在使用SocketIO時,不用擔心兼容問題,底層會自動選用最佳的通信方式。
四、Socket.io有什么特點
易用性:Socket.io封裝了服務端和客戶端,使用起來非常簡單方便。跨平台:Socket.io是跨平台的,可以實現多平台的即時通訊,Socket.io支持跨平台,這就意味着你有了更多的選擇,可以在自己喜歡的平台下開發實時應用。由於 iOS 端進行 socket 編程主要使用 GCDAsyncSocket 框架,但要實現 Android、iOS、web 多平台的通訊,還是選擇統一的框架或協議比較好。自適應:Socket.io 實現了實時雙向的基於事件的通訊機制,是基於 webSocket 的封裝,但它不僅僅包括 webSocket,還對輪詢(Polling)機制以及其它的實時通信方式封裝成了通用的接口,並且在服務端實現了這些實時機制的相應代碼,它會自動根據瀏覽器從WebSocket、AJAX長輪詢、Iframe流等等各種方式中選擇最佳的方式來實現網絡實時應用,非常方便和人性化,而且支持的瀏覽器最低達IE5.5。
五、Socket.io安裝
服務端安裝:
首先要安裝Node.js,然后再用如下命名安裝Socket.io
npm install socket.io
客戶端安裝:
npm install socket.io-client
六、Socket.io示例
1. 客戶端 socket.js:
1.1 vue環境下:
import io from "socket.io-client";//socket const socket = io('http://localhost:3000');//此處前端需要配置跨域 Vue.prototype.$socket = socket
1.2 正常H5或者其他前端環境的通用方法(一般涉及到h5或者其他前端環境的跨域處理自行百度自己使用的環境,然后自己做跨域處理,如果是vue的跨域處理,在最底下有我的另一篇博客介紹)
h5: <script src="/socket.io/socket.io.js"></script> <script> const socket = io("http://localhost:3000"); </script> 其他前端環境: const io = require("socket.io-client"); // or with import syntax import { io } from "socket.io-client";
2. 服務器端 sever.js
