當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js 链接websocket马上断开_WebSocket之基于STOMP协议的广播模式实现群聊功能

發布時間：2024/8/5 编程问答 46 豆豆

生活随笔收集整理的這篇文章主要介紹了 js 链接websocket马上断开_WebSocket之基于STOMP协议的广播模式实现群聊功能小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

又是一個老套的古詩詞賞析

不恨此花飛盡，恨西園、落紅難綴。——蘇軾《水龍吟·次韻章質夫楊花詞》

WebSocket與STOMP協議

相關簡介

WebSocket

WebSocket 是一種網絡通信協議，很多高級功能都需要它。夠精辟吧

初次接觸 WebSocket 的人，都會問同樣的問題：我們已經有了 HTTP 協議，為什么還需要另一個協議？它能帶來什么好處？

答案很簡單，因為 HTTP 協議有一個缺陷：通信只能由客戶端發起。

舉例來說，我們想了解今天的天氣，只能是客戶端向服務器發出請求，服務器返回查詢結果。HTTP 協議做不到服務器主動向客戶端推送信息。

這種單向請求的特點，注定了如果服務器有連續的狀態變化，客戶端要獲知就非常麻煩。我們只能使用"輪詢"：每隔一段時候，就發出一個詢問，了解服務器有沒有新的信息。最典型的場景就是聊天室。

輪詢的效率低，非常浪費資源(因為必須不停連接，或者 HTTP 連接始終打開)。因此，工程師們一直在思考，有沒有更好的方法。WebSocket 就是這樣發明的。

STOMP

STOMP是一個更高級的協議，它使用一個基于幀(frame)的格式來定義消息，與HTTP的request和response類似。

STOMP即Simple (or Streaming) Text Orientated Messaging Protocol，簡單(流)文本定向消息協議，它提供了一個可互操作的連接格式，允許STOMP客戶端與任意STOMP消息代理(Broker)進行交互。STOMP協議由于設計簡單，易于開發客戶端，因此在多種語言和多種平臺上得到廣泛地應用。

STOMP協議的前身是TTMP協議(一個簡單的基于文本的協議)，專為消息中間件設計。

STOMP是一個非常簡單和容易實現的協議，其設計靈感源自于HTTP的簡單性。盡管STOMP協議在服務器端的實現可能有一定的難度，但客戶端的實現卻很容易。例如，可以使用Telnet登錄到任何的STOMP代理，并與STOMP代理進行交互。

別問，問就是百度抄來的

示例使用框架

SpringBoot+JS? 覺得low的大佬左上角可以點X了

開始實踐

很多解釋都在代碼的注釋中，細細品味

導入依賴

<dependency> <groupId>org.springframework.bootgroupId> <artifactId>spring-boot-starter-websocketartifactId> dependency> <dependency> <groupId>org.webjarsgroupId> <artifactId>sockjs-clientartifactId> <version>1.1.2version> dependency> <dependency> <groupId>org.webjarsgroupId> <artifactId>jqueryartifactId> <version>3.5.1version> dependency> <dependency> <groupId>org.webjarsgroupId> <artifactId>stomp-websocketartifactId> <version>2.3.3-1version> dependency> <dependency> <groupId>org.webjarsgroupId> <artifactId>webjars-locatorartifactId> <version>0.40version> dependency>

導入前端相關的jar依賴是為了減少收集js文件，頁面中直接獲取即可

編寫配置類

package com.websit.formerly.sdk.websocket;import org.springframework.context.annotation.Configuration;import org.springframework.messaging.simp.config.MessageBrokerRegistry;import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;import org.springframework.web.socket.config.annotation.StompEndpointRegistry;import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;/** * @program: formerly * @description: websocket配置類 * @author: ShiDunKai * @create: 2020-10-13 15:13 **//** * 配置WebSocket,需要在配置類上使用@EnableWebSocketMessageBroker開啟WebSocket支持 * @EnableWebSocketMessageBroker注解同時會開啟使用STOMP協議來傳輸基于代理(message broker)用的消息， * 這時控制器支持使用@MessageMapping，就像使用@RequestMapping一樣。 */@Configuration@EnableWebSocketMessageBrokerpublic class WebSocketConfig implements WebSocketMessageBrokerConfigurer { /** * 配置消息代理類 */ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { //設置消息代理前綴 registry.enableSimpleBroker("/topic"); //設置app代理前綴 registry.setApplicationDestinationPrefixes("/app"); } /** * 注冊STOMP協議的節點(endpoint)并映射指定的URL */ @Override public void registerStompEndpoints(StompEndpointRegistry registry) { //設置連接點 registry.addEndpoint("/wechat").withSockJS(); }}注意連接點與代理、消息前綴的名稱

編寫controller

package com.websit.formerly.sdk.websocket;import org.springframework.messaging.handler.annotation.MessageMapping;import org.springframework.messaging.handler.annotation.SendTo;import org.springframework.stereotype.Controller;/** * @program: formerly * @description: websocketcontroller * @author: ShiDunKai * @create: 2020-10-13 15:25 **/@Controllerpublic class WebSocketController { /** * 當瀏覽器向服務端發送請求時，通過@MessageMapping映射/welcome這個地址，類似于@RequestMapping * 當服務端有消息時，會對訂閱了@SendTo中的路徑的瀏覽器發送消息 */ @MessageMapping("/hello") @SendTo("/topic/getting") public MessageBean getting(MessageBean messageBean){ return messageBean; }}

編寫頁面

<html lang="en"><head> <meta charset="UTF-8"> <title>sdk聊天室title>head><body><table> <tr> <td> 請輸入用戶名: td> <td> <input type="text" id="name"/> td> tr> <tr> <td> <input type="button" id="connect" value="連接"> td> <td> <input type="button" disabled="disabled" id="disconnect" value="斷開連接"> td> tr>table><div id="chat" style="display: none"> <table> <tr> <td>請輸入聊天內容td> <td><input type="text" id="content">td> <td><input type="button" id="send" value="發送">td> <td>td> tr> table> <div id="conversation"> 群聊進行中...... div>div>body><script src="/webjars/sockjs-client/sockjs.min.js">script><script src="/webjars/stomp-websocket/stomp.min.js">script><script src="/webjars/jquery/jquery.min.js">script><script> $(function (){ $("#connect").click(function(){ connect(); }) $("#disconnect").click(function () { if (stompClient!=null){ stompClient.disconnect(); } setConnected(false); }) $("#send").click(function () { stompClient.send('/app/hello',{},JSON.stringify({'name':$('#name').val(),'commont':$('#content').val()})) }) }) var stompClient=null; function connect(){ if (!$("#name").val()){ return; } var socket=new SockJS('/wechat'); stompClient=Stomp.over(socket); //建立連接 stompClient.connect({},function (success) { //連接成功 setConnected(true); stompClient.subscribe('/topic/getting',function (msg) { showGetting(JSON.parse(msg.body)); }) }) } function showGetting(msg) { $("#conversation").append(''+msg.name+':'+msg.commont+''); } //處理頁面顯示 function setConnected(flag){ $("#connect").prop("disabled",flag); $("#disconnect").prop("disabled",!flag); if (flag){ $("#chat").show(); }else{ $("#chat").hide(); } }script>html>

效果如下

張三連接，李四連接

張三發送消息，李四收到

李四發送消息，張三收到

這樣的話聊天室的最基本的功能就實現了，如何實現點對點的聊天？更漂亮的頁面，更全的個人信息，拉黑......等，來日方長

又水了一篇文章，我就來試試公眾號文章的樣式好不好用，好不好看，目前還是比較滿意的，就是太麻煩了，下次整個通篇都是粉色的試試

晚安。

參考：江南一點雨?百度喜歡就點個在看再走吧