SpringBoot+WebSocket實(shí)現(xiàn)多人在線聊天案例實(shí)例
1.pom.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.6.3</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.yl</groupId> <artifactId>chat01</artifactId> <version>0.0.1-SNAPSHOT</version> <name>chat01</name> <description>Demo project for Spring Boot</description> <properties> <java.version>11</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <!--前端庫依賴--> <dependency> <groupId>org.webjars</groupId> <artifactId>sockjs-client</artifactId> <version>1.1.2</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>stomp-websocket</artifactId> <version>2.3.3</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.5.1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator-core</artifactId> <!-- <version>0.48</version>--> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
2.消息實(shí)體類
package com.yl.chat01.domain; import java.io.Serializable; public class Message implements Serializable { private String name; private String content; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getContent() { return content; } public void setContent(String content) { this.content = content; } @Override public String toString() { return "Message{" + "name='" + name + '\'' + ", content='" + content + '\'' + '}'; } }
3.controller
package com.yl.chat01.controller; import com.yl.chat01.domain.Message; import org.springframework.messaging.handler.annotation.MessageMapping; import org.springframework.messaging.handler.annotation.SendTo; import org.springframework.stereotype.Controller; @Controller public class GreetingController { @MessageMapping("/hello") //發(fā)送消息請求 @SendTo("/topic/greetings") //消息廣播 public Message greeting(Message message) { return message; } }
4.WebSocket的配置文件
package com.yl.chat01.config; 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; @Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { // 注冊端點(diǎn),用于前端建立連接的 @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/chat").withSockJS(); } // 配置消息代理,通過廣播的形式來傳遞消息 @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.enableSimpleBroker("/topic"); } }
5.前端發(fā)送消息頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/webjars/jquery/jquery.min.js"></script> <script src="/webjars/sockjs-client/sockjs.min.js"></script> <script src="/webjars/stomp-websocket/stomp.min.js"></script> </head> <body> <div> <label for="username">請輸入用戶名:</label> <input type="text" id = "username" placeholder="用戶名"/> </div> <div> <input type="button" value="連接" id="connect"/> <input type="button" value="斷開連接" id="disconnect" disabled="disabled"/> </div> <div id="chat"></div> <div> <label for="content">請輸入聊天內(nèi)容</label> <input type="text" id="content" placeholder="聊天內(nèi)容"/> </div> <input type="button" value="發(fā)送" disabled="disabled" id="send"/> <script> var stompClient; $(function () { //連接 $("#connect").click(function () { connect() }) //發(fā)送消息到后臺(tái) $("#send").click(function () { stompClient.send("/hello",{},JSON.stringify({'name':$('#username').val(),'content':$("#content").val()})) }) //斷開連接 $("#disconnect").cilck(function () { stompClient.disconnect(); disableButton(false); }) }) function connect() { if (!$("#username").val()) { alert("請輸入用戶名") return; } //獲取連接地址 var socketjs = new SockJS("/chat"); stompClient = Stomp.over(socketjs); //建立連接 stompClient.connect({},function (frame) { alert("connect success") disableButton(true); //訂閱消息 stompClient.subscribe("/topic/greetings",function (obj) { var msg = JSON.parse(obj.body); $("#chat").append("<div>"+msg.name+ ":" + msg.content+"</div>") }) }) } function disableButton(connected) { $("#connect").prop("disabled",connected); $("#disconnect").prop("disabled",!connected); $("#send").prop("disabled",!connected); } </script> </body> </html>
6.測試
6.1.客戶端A
6.2.客戶端B
到此這篇關(guān)于SpringBoot+WebSocket實(shí)現(xiàn)多人在線聊天案例實(shí)例的文章就介紹到這了,更多相關(guān)SpringBoot WebSocket 多人聊天內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
深入了解Java設(shè)計(jì)模式之職責(zé)鏈模式
Java設(shè)計(jì)模式中有很多種類別,例如單例模式、裝飾模式、觀察者模式等。本文將為大家詳細(xì)介紹其中的職責(zé)鏈模式,感興趣的可以了解一下2022-09-09使用ClassFinal實(shí)現(xiàn)SpringBoot項(xiàng)目jar包加密的操作指南
在實(shí)際開發(fā)中,保護(hù)項(xiàng)目的安全性和保密性是至關(guān)重要的,針對于 Spring Boot 項(xiàng)目,我們需要將 JAR 包進(jìn)行加密從而有效地防止未經(jīng)授權(quán)的訪問和修改,本文將介紹如何使用ClassFinal在 Spring Boot 項(xiàng)目中實(shí)現(xiàn) JAR 包加密,需要的朋友可以參考下2024-06-06SpringBoot項(xiàng)目的logback日志配置(包括打印mybatis的sql語句)
這篇文章主要介紹了SpringBoot項(xiàng)目的logback日志配置(包括打印mybatis的sql語句),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09Java實(shí)現(xiàn)樹形菜單的方法總結(jié)
當(dāng)我們想要展示層級結(jié)構(gòu),如文件目錄、組織結(jié)構(gòu)或分類目錄時(shí),樹形菜單是一個(gè)直觀且有效的解決方案,本文為大家整理了java中幾種常見方法,希望對大家有所幫助2023-08-08Java日常練習(xí)題,每天進(jìn)步一點(diǎn)點(diǎn)(28)
下面小編就為大家?guī)硪黄狫ava基礎(chǔ)的幾道練習(xí)題(分享)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧,希望可以幫到你2021-07-07Spring?Security實(shí)現(xiàn)HTTP認(rèn)證
本文主要介紹了Spring?Security實(shí)現(xiàn)HTTP認(rèn)證,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧<BR>2022-06-06