即時通訊的業務場景和需求

即時通信（Instant Messaging，簡稱IM）是一個允許兩人或多人使用網絡實時的傳遞文字消息、文件、語音與視頻交流。 即時通訊技術應用于需要實時收發消息的業務場景。

例如：抖音，直播， 社交App，小黃車app

短連接

客戶端和服務器每進行一次通訊，就建立一次連接，通訊結束就中斷連接。

HTTP是一個簡單的請求-響應協議，它通常運行在TCP之上。HTTP/1.0使用的TCP默認是短連接。
HTTP是一個簡單的請求-響應協議，它通常運行在TCP之上。HTTP/1.0使用的TCP默認是短連接。HTTP是一個協議， 1.0底層用的是短鏈接

長連接

是指在建立連接后可以連續多次發送數據，直到雙方斷開連接。

HTTP從1.1版本起，底層的TCP使用的長連接。
使用長連接的HTTP協議，會在響應頭加入代碼： Connection:keep-alive

長連接和短鏈接區別

短連接：創建連接 -> 傳輸數據 -> 關閉連接
長連接：創建連接 -> 傳輸數據 -> 保持連接 -> 傳輸數據 ->…… -> 關閉連接

使用場景
短鏈接：并發量大的，數據交互不頻繁的
長連接：數據交互頻繁，點對點通訊

通訊方式
短鏈接：我跟你發信息，必須等到你回復我或者等了一會等不下去了，就結束通訊了
長連接：我跟你發信息，一直保持通訊，在保持通訊這個時段，我去做其他事情的當中你回復我了，我能立刻你回復了我什么，然后可以回應或者不回應，繼續做事

WebSocket協議

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

何謂全雙工：全雙工（Full Duplex）是通訊傳輸的一個術語。雙方在通信時允許數據在兩個方向上同時傳輸，它在能力上相當于兩個單工通信方式的結合。全雙工指可以同時進行信號的雙向傳輸。指A→B的同時B→A，就像是雙向車道。

單工：就就像是汽車的單行道，是在只允許甲方向乙方傳送信息，而乙方不能向甲方傳送 。

在推送功能的實現技術上，相比使用Ajax 定時輪詢的方式(setInterval)，WebSocket 更節省服務器資源和帶寬。
在 WebSocket中，瀏覽器和服務器只需要完成一次握手，就可以創建持久性的連接，并進行雙向數據傳輸。

websocket常用事件方法

var Socket = new WebSocket(url, [protocol] );

WebSocket 事件
以下是 WebSocket 對象的相關事件。假定我們使用了以上代碼創建了 Socket 對象：

WebSocket 方法

案例代碼

// 指定websocket路徑var websocket;if ('WebSocket' in window) {websocket = new WebSocket("ws://localhost:8080/Spring-websocket/ws?uid="+${sessionScope.uid});} else if ('MozWebSocket' in window) {websocket = new MozWebSocket("ws://localhost:8080/Spring-websocket/ws"+${sessionScope.uid});} else {websocket = new SockJS("http://localhost:8080/Spring-websocket/ws/sockjs"+${sessionScope.uid});}//var websocket = new WebSocket('ws://localhost:8080/Spring-websocket/ws');websocket.onmessage = function(event) {var data=JSON.parse(event.data);if(data.from>0||data.from==-1){//用戶或者群消息// 接收服務端的實時消息并添加到HTML頁面中$("#log-container").append("<div class='bg-info'><label class='text-danger'>"+data.fromName+"&nbsp;"+data.date+"</label><div class='text-success'>"+data.text+"</div></div><br>");// 滾動條滾動到最低部scrollToBottom();}else if(data.from==0){//上線消息if(data.text!="${sessionScope.username}"){ $("#users").append('<a href="#" οnclick="talk(this)" class="list-group-item">'+data.text+'</a>');//alert(data.text+"上線了");}}else if(data.from==-2){//下線消息if(data.text!="${sessionScope.username}"){ $("#users > a").remove(":contains('"+data.text+"')");//alert(data.text+"下線了");}}};websocket.onopen = function(event) {debugger//alert('連接成功！');};websocket.onclose = function(event) {debugger//alert('連接關閉！');};websocket.onerror = function(event) {//alert('連接出錯！');};

依賴

<dependency><groupId>org.springframework</groupId><artifactId>spring-websocket</artifactId><version>4.0.5.RELEASE</version></dependency>

后端代碼

/*** WebScoket配置處理器*/ @Component @EnableWebSocket public class WebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {@ResourceMyWebSocketHandler handler;public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(handler, "/ws").addInterceptors(new HandShake());registry.addHandler(handler, "/ws/sockjs").addInterceptors(new HandShake()).withSockJS();}}

總結

以上是生活随笔為你收集整理的即时通讯WebSocket的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。