文章目錄

??一、技術(shù)介紹

線上演示地址： http://chat.breez.work

實(shí)時(shí)通信 （Instant Messaging，簡(jiǎn)稱IM）是一個(gè) 實(shí)時(shí) 通信系統(tǒng)，允許兩人或多人使用網(wǎng)絡(luò)實(shí)時(shí)的傳遞 文字消息 、 文件 、 語音 與 視頻交流 。［４］

場(chǎng)景再現(xiàn)：

• ??微信聊天
• ??QQ聊天
• ??網(wǎng)站在線客服

??1.1 客戶端WebSocket

WebSocket 對(duì)象提供了用于創(chuàng)建和管理 WebSocket 連接，以及可以通過該連接 發(fā)送 和 接收數(shù)據(jù) 的 API。使用 WebSocket() 構(gòu)造函數(shù)來構(gòu)造一個(gè) WebSocket。［１］

構(gòu)造函數(shù)如下所示：

const webSocket = WebSocket(url[, protocols])

例子如下：

const webSocket = new WebSocket(“ws://42.193.120.86:3688/ws/小明/翠花”)

??1.1.1 函數(shù)

1、 webSocket.send()

該函數(shù)用于向服務(wù)端發(fā)送一條消息，例子如下：

webSocket.send(“Hello server!”);

2、 webSocket.close()

該函數(shù)用于關(guān)閉客戶端與服務(wù)端的連接，例子如下：

webSocket.close();

??1.1.2事件

1、webSocket.onopen

該事件用于監(jiān)聽客戶端與服務(wù)端的連接狀態(tài)，如果客戶端與服務(wù)端 連接成功 則該事件觸發(fā)，例子如下：

webSocket.onopen = function(event) { console.log(“連接已經(jīng)建立，可以進(jìn)行通信”);};

2、webSocket.onclose

如果服務(wù)端與客戶端連接斷開，那么此事件出發(fā)，例子如下：

webSocket.onclose = function(event) { console.log(“連接已經(jīng)關(guān)閉”);};

3、webSocket: message event

該事件用于監(jiān)聽服務(wù)端向客戶端發(fā)送的消息，例子如下：

webSocket.addEventListener(‘message’, function (event) { console.log(‘來自服務(wù)端的消息：’, event.data);});

4、webSocket:error event

如果客戶端與服務(wù)端發(fā)生錯(cuò)誤時(shí)，那么此事件將會(huì)觸發(fā)，例子如下：

webSocket.addEventListener(‘error’, function (event) { console.log(‘連接出現(xiàn)錯(cuò)誤’, event);});

??1.2 服務(wù)端WebSocket

@ServerEndpoint 用于聲明一個(gè)socket服務(wù)，例子如下：

@ServerEndpoint(value = “/ws/{userId}/{targetId}”)

幾個(gè)重要的 方法 注解：

@OnOpen@OnClose@OnMessage@OnError

??二、實(shí)戰(zhàn)

??2.1、服務(wù)端

??2.1.1引入maven依賴

org.springframework.boot spring-boot-starter-websocket

??2.1.2 編寫配置類

@Configurationpublic class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); }}

??2.1.3 編寫WebSocketService服務(wù)類

下面的 userId 代表 發(fā)送者 的ID號(hào)， target 代表 發(fā)送目標(biāo) ID號(hào)。

@Component@ServerEndpoint(value = “/ws/{userId}/{target}”)public class WebSocketService { //用于保存連接的用戶信息 private static ConcurrentHashMap SESSION = new ConcurrentHashMap(); //原子遞增遞減，用于統(tǒng)計(jì)在線用戶數(shù) private static AtomicInteger count = new AtomicInteger(); //消息隊(duì)列，用于保存待發(fā)送的信息 private Queue queue = new LinkedBlockingDeque(); //onOpen() //onClose() //onMessage() //onError()}

??2.1.4 建立連接

建立連接之前，判斷用戶是否已經(jīng)連接，如果沒有連接，那么將用戶session信息保存到集合，然后計(jì)數(shù)器遞增。

@OnOpen public void onOpen(Session session, @PathParam(“userId”) String userId) { if (!SESSION.containsKey(userId)) { SESSION.put(userId, session); count.incrementAndGet(); } }

??2.1.5 關(guān)閉連接

關(guān)閉連接的時(shí)候，將用戶session刪除和計(jì)數(shù)器遞減。

@OnClose public void onClose(@PathParam(“userId”) String userId) { SESSION.remove(userId); count.decrementAndGet(); }

??2.1.6 發(fā)送消息

發(fā)送采用的方法是： session.getBasicRemote().sendText(“你好”);

@OnMessage public void onMessage(String message, @PathParam(“userId”) String userId, @PathParam(“target”) String target) throws IOException { queue.add(message); Session s = SESSION.get(target); if (s == null) { Session b = SESSION.get(userId); b.getBasicRemote().sendText(“對(duì)方不在線”); } else { for (int i = 0; i < queue.size(); i++) { String msg = queue.poll(); Message m = new Message(); m.setUserId(userId); s.getBasicRemote().sendText(msg); } } }

??2.1.7 監(jiān)聽錯(cuò)誤

出現(xiàn)錯(cuò)誤，刪除用戶session信息和計(jì)數(shù)器遞減

@OnError public void onError(Throwable error, @PathParam(“userId”) String userId) { SESSION.remove(userId); count.decrementAndGet(); error.printStackTrace(); }

??2.2 客戶端

本案例中客戶端采用Nuxt編寫，相關(guān)代碼如下

??2.2.1 主頁面

運(yùn)行截圖如圖所示：

歡迎使用喵喵號(hào)聊天 聊一下 body { background: url(‘../static/img/cat.jpg’); }

??2.2.1 聊天頁面

運(yùn)行截圖如下：

小明

翠花

我的喵喵號(hào)：{{user.userId}} 對(duì)方喵喵號(hào)：{{user.targetId}} 清空消息 {{m.msg}} {{m.msg}} 系統(tǒng)消息：{{m.msg}} 發(fā)送

??三、開源地址

• ??Gitee： https://gitee.com//websocket
• 演示地址： http://chat.breez.work

??四、參考文獻(xiàn)

• ［１］MDN： WebSocket
• ［２］Nuxt： https://nuxtjs.org
• ［３］Vue： https://cn.vuejs.org
• ［４］百度百科： 及時(shí)通信

??收錄專欄：系統(tǒng)設(shè)計(jì)與實(shí)戰(zhàn)

原文鏈接：https://blog.csdn.net/m0_54853420/article/details/125244263?utm_source=tuicool&utm_medium=referral