js 链接websocket马上断开_WebSocket之基于STOMP协议的广播模式实现群聊功能
又是一個老套的古詩詞賞析
不恨此花飛盡，恨西園、落紅難綴。——蘇軾《水龍吟·次韻章質(zhì)夫楊花詞》
WebSocket與STOMP協(xié)議
相關簡介
WebSocket
WebSocket 是一種網(wǎng)絡通信協(xié)議，很多高級功能都需要它。夠精辟吧
初次接觸 WebSocket 的人，都會問同樣的問題：我們已經(jīng)有了 HTTP 協(xié)議，為什么還需要另一個協(xié)議？它能帶來什么好處？
答案很簡單，因為 HTTP 協(xié)議有一個缺陷：通信只能由客戶端發(fā)起。
舉例來說，我們想了解今天的天氣，只能是客戶端向服務器發(fā)出請求，服務器返回查詢結(jié)果。HTTP 協(xié)議做不到服務器主動向客戶端推送信息。
這種單向請求的特點，注定了如果服務器有連續(xù)的狀態(tài)變化，客戶端要獲知就非常麻煩。我們只能使用"輪詢"：每隔一段時候，就發(fā)出一個詢問，了解服務器有沒有新的信息。最典型的場景就是聊天室。
輪詢的效率低，非常浪費資源(因為必須不停連接，或者 HTTP 連接始終打開)。因此，工程師們一直在思考，有沒有更好的方法。WebSocket 就是這樣發(fā)明的。
STOMP
STOMP是一個更高級的協(xié)議，它使用一個基于幀(frame)的格式來定義消息，與HTTP的request和response類似。
STOMP即Simple (or Streaming) Text Orientated Messaging Protocol，簡單(流)文本定向消息協(xié)議，它提供了一個可互操作的連接格式，允許STOMP客戶端與任意STOMP消息代理(Broker)進行交互。STOMP協(xié)議由于設計簡單，易于開發(fā)客戶端，因此在多種語言和多種平臺上得到廣泛地應用。
STOMP協(xié)議的前身是TTMP協(xié)議(一個簡單的基于文本的協(xié)議)，專為消息中間件設計。
STOMP是一個非常簡單和容易實現(xiàn)的協(xié)議，其設計靈感源自于HTTP的簡單性。盡管STOMP協(xié)議在服務器端的實現(xiàn)可能有一定的難度，但客戶端的實現(xiàn)卻很容易。例如，可以使用Telnet登錄到任何的STOMP代理，并與STOMP代理進行交互。
別問，問就是百度抄來的
示例使用框架
SpringBoot+JS? 覺得low的大佬左上角可以點X了
開始實踐
很多解釋都在代碼的注釋中，細細品味
01
導入依賴
<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文件，頁面中直接獲取即可
02
編寫配置類
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協(xié)議來傳輸基于代理(message broker)用的消息， * 這時控制器支持使用@MessageMapping，就像使用@RequestMapping一樣。 */@Configuration@EnableWebSocketMessageBrokerpublic class WebSocketConfig implements WebSocketMessageBrokerConfigurer { /** * 配置消息代理類 */ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { //設置消息代理前綴 registry.enableSimpleBroker("/topic"); //設置app代理前綴 registry.setApplicationDestinationPrefixes("/app"); } /** * 注冊STOMP協(xié)議的節(jié)點(endpoint)并映射指定的URL */ @Override public void registerStompEndpoints(StompEndpointRegistry registry) { //設置連接點 registry.addEndpoint("/wechat").withSockJS(); }}注意連接點與代理、消息前綴的名稱03
編寫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 { /** * 當瀏覽器向服務端發(fā)送請求時，通過@MessageMapping映射/welcome這個地址，類似于@RequestMapping * 當服務端有消息時，會對訂閱了@SendTo中的路徑的瀏覽器發(fā)送消息 */ @MessageMapping("/hello") @SendTo("/topic/getting") public MessageBean getting(MessageBean messageBean){ return messageBean; }}04
編寫頁面
<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>請輸入聊天內(nèi)容td> <td><input type="text" id="content">td> <td><input type="button" id="send" value="發(fā)送">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>效果如下
張三連接，李四連接
張三發(fā)送消息，李四收到
李四發(fā)送消息，張三收到
這樣的話聊天室的最基本的功能就實現(xiàn)了，如何實現(xiàn)點對點的聊天？更漂亮的頁面，更全的個人信息，拉黑......等，來日方長
又水了一篇文章，我就來試試公眾號文章的樣式好不好用，好不好看，目前還是比較滿意的，就是太麻煩了，下次整個通篇都是粉色的試試
晚安。
參考：江南一點雨?百度喜歡就點個在看再走吧總結(jié)
以上是生活随笔為你收集整理的js 链接websocket马上断开_WebSocket之基于STOMP协议的广播模式实现群聊功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 美团神券膨胀怎么取消? 美团天天神券膨胀
- 下一篇： activity 点击后传递数据给fra