您的位置：首页 > 编程语言 > Java开发

Spring Boot整合WebSocket 实现消息群发(群聊)功能

2019-03-03 21:24 615 查看

首先创建一个Spring boot项目 pox.xml如下

<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator-core</artifactId>
</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.3.1</version>
</dependency>

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>

这里我们使用jar包的形式对前端库进行统一管理

接着我们配置WebSocket 代码如下

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
//设置消息代理的前缀

registry.enableSimpleBroker("/topic");

//表示配置一个或多个前缀 表示前缀为/app的destination可以通过@messageMapping注解的方法处理
//而其他destination(列入/topic)就将直接交给broker处理
registry.setApplicationDestinationPrefixes("/app");
}

@Override
//定义一个前缀为"/chat"的endPoint，并开启sockjs支持
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/chat").withSockJS();
}
}

完事后我们定义一个Controller

@Autowired
//Spring Boot已经配置好了 直接注入了使用即可
SimpMessagingTemplate messagingTemplate;
@MessageMapping("/hello")
@SendTo("/topic/greetings")
public Message greeting(Message message) throws Exception{
return message;
}

差点忘了实体类

public class Message {
//用户名
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;
}
}

我们的后台代码就差不多啦接着我们去static里面创建一个名为chat.html的页面
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<script src="app.js"></script>
</head>
<body>
<div>
<label for="name">请输入用户名：</label>
<input type="text" id="name" placeholder="用户名">
</div>
<div>
<button id="connect" type="button">连接</button>
<button id="disconnect" type="button" disabled="disabled">断开连接</button>
</div>
<div id="chat" style="display: none">
<div>
<label for="name">请输入聊天内容：</label>
<input type="text" id="content" placeholder="聊天内容">
</div>
<button id="send" type="button">发送</button>
<div id="greetings">
<div id="conversation" style="display: none">群聊进行中...</div>
</div>
</div>
</body>
</html>

这里解释一下：
这几个js都是我们从maven里面导入了的所以相当于是自带了我们只管用就行.
只需要定义一个app.js就行
代码如下

var stompClient = null;
function setConnected(connected) {
$("#connect").prop("disabled",connected);
$("#disconnect").prop("disabled",!connected);
if(connected){
$("#conversation").show();
$("#chat").show();
}
else{
$("#conversation").hide();
$("#chat").hide();
}
$("#greetings").html("");
}

function connect() {
if(!$("#name").val()){
return;
}
var socket = new SockJS('/chat');
stompClient = Stomp.over(socket)
stompClient.connect({},function (frame) {
setConnected(true);
stompClient.subscribe('/topic/greetings',function (greeting) {
showGreeting(JSON.parse(greeting.body));
});
});
}
function disconnect() {
if(stompClient !== null){
stompClient.disconnect();
}
setConnected(false);
}
function sendName() {
stompClient.send("/app/hello",{},
JSON.stringify({'name': $("#name").val(),'content':$("#content").val()}));
}

function showGreeting(message) {

$("#content").val("");
$("#greetings").append("<div>"+message.name+":"+message.content+"</div>");
}

$(function () {

$("#connect").click(function () {
connect();
});
$("#disconnect").click(function () {
disconnect();
});
$("#send").click(function () {
sendName();
});
});

大功告成！开始我们的测试叭

这里我们需要开启两个客户端哟也就是说浏览器模拟两个客户端（或者多个 you happy jiu ok）

测试成功!
我们的WebSocket主要是用来让我们客户端和服务器进行交互的就像这个群聊
我们客户端发送数据给服务器，服务器接收后将数据发送给页面

后面我还会写一个关于WebSocket实现点对点发送(一对一聊天)的功能感兴趣的可以进我的主页查看文章。

3ff7

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航