即時通訊框架SocketIO


一、介紹

本文的服務端是使用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

 關於比較完整的socketio環境搭建可以看看我的另一篇:前台:VueSocketIOExt+socket.io-client,后台socket.io的聊天環境搭載

 




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM