WebSocket 實現前後端通訊的筆記

2022-06-05 21:36:10 字數 2241 閱讀 3764

引入依賴

在 spring 中要使用 websocket 功能,需要在pom中引入依賴:

org.springframework.bootgroupid>

spring-boot-starter-websocketartifactid>

dependency>

配置類

增加乙個配置類,用於定義 websocket 全域性配置資訊

@configuration

@enablewebsocketmessagebroker

public

class

websocketstompconfig

implements

websocketmessagebrokerconfigurer

/*** 配置資訊**

* @param registry

*/@override

public

void

configuremessagebroker

(messagebrokerregistry registry)

來看一下這兩個方法:

1、registerstompendpoints(stompendpointregistry registry)

註冊stomp端點。起到的作用就是新增乙個服務端點,來接收客戶端的連線,

registry.addendpoint("/tmax/ws")表示新增了乙個/tmax/ws端點,客戶端可以通過這個端點來進行連線。withsockjs()的作用是開啟 sockjs 訪問支援,即可通過http://ip:port/tmax/ws來和服務端 websocket 連線。

2、configuremessagebroker(messagebrokerregistry registry)

開始業務**的編寫

先了解幾個知識點,下方會用到。

2、simpmessagingtemplate

simpmessagingtemplate 是 spring-websocket 內建的乙個訊息傳送工具,可以將訊息傳送到指定的客戶端。

3、sendto

@sendto 可以把訊息廣播到路徑上去,例如下面可以把訊息廣播到 "/topic/greetings」,如果客戶端在這個路徑訂閱訊息,則可以接收到訊息

接下來看一下後台**實現,hellocontroller

/**

* @author niceyoo

*/@slf4j

@controller

@api(description = "hello介面")

@transactional

public

class

hellocontroller

/*** 接收然後**至客戶端訊息

* @param message

* @return

* @throws exception

*/(string message)

throws exception 

/*** 推送訊息

* @return

*/@responsebody()}

hello.html **:

登陸客戶端

傳送訊息

操作流程:

點選「登入客戶端」,輸入框內輸入內容,點選傳送訊息。

訊息推送

關於訊息的推送,借助 postman,呼叫,實現後端推送至客戶端。

額外補充,關於訊息推送,往往會用到推送至指定使用者,則:messagingtemplate.convertandsendtouser(id,"/queue/subscribe", "您收到了新的訊息");,其中id為系統使用者id。

詳細可搜尋simpmessagingtemplate的一些用法。

如何使用WEBSOCKET實現前後端通訊

websocket通訊是很好玩的,也很有用的的通訊方式,使用方式如下 第一步由於springboot很好地整合了websocket,所以先在在pom.xml檔案中引入依賴 org.springframework.boot spring boot starter websocket 第二步在前端介面使...

Autobahn實現WebSocket通訊

最近開發中需要通過ws協議通訊,於是做了些功課,現在websocket用的比較多的就是autobahn,由於使用方便所以選擇了它。然後就是使用websocketconnection這個類,使用方法直接上 吧mconnect.connect wsurl,new websockethandler ove...

nginx實現前後端分離

參考 路徑 nginx conf nginx.conf2.1 設定前端 位置location 2.2 配置後台請求攔截 後台跳轉 攔截所有前端 以 api 開始的請求 到 後端服務 http localhost 8080 backend project name api location api2....