2017-12-22

Java SpringBoot下的WebSocket

前面我们已经讲了如何搭建一个SpringBoot的Web框架，那么搭完了框架总要搞点事情吧，今天咱们就来做一个基于SpringBoot的简易聊天室。

聊天

WebSocket简介

工欲善其事必先利其器，我们先来讲一下什么是WebScoket。WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。，也就是说我们可以利用浏览器给服务器发送消息，服务器也可以给浏览器发送消息，目前的主流浏览器对WebSocket的支持都还不错，但是在实际开发中使用WebSocket工作量会很大，并且还有对浏览器的兼容问题，所以这个时候我们更多的是使用WebSocket的一个子协议stomp，利用它来快速实现我们的功能。

环境

我们做的建议公共聊天室需要在SpringBoot的POM文件中添加两个依赖，不知道怎么搭建SpringBoot的朋友可以看下我前面发的SpringBoot搭建的方法。

需要的maven依赖：

<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-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency>

开始撸代码

搭建完了基本的开发环境之后我们来写代码，首先我们先写一个关于WebSocket的节点以及模式的配置类，代码里有详细的注解。

package com.guanglan.config; import org.springframework.context.annotation.Configuration; import org.springframework.messaging.simp.config.MessageBrokerRegistry; import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer; import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker; import org.springframework.web.socket.config.annotation.StompEndpointRegistry; /** * Created by GuangLan on 2017/12/21. */ @Configuration //配置注解 @EnableWebSocketMessageBroker //@EnableWebSocketMessageBroker注解表示开启使用STOMP协议来传输基于代理的消息，Broker就是代理的意思。 public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer { /** * configureMessageBroker用来配置消息代理模式，我们做的是公共聊天室所以用topic即可 * @param config */ @Override public void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker("/topic"); } /** * registerStompEndpoints方法表示注册STOMP协议的节点，并指定映射的URL的位置 * @param stompEndpointRegistry */ @Override public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) { //stompEndpointRegistry.addEndpoint("/MyWebsocket").withSockJS(); // 的意思就是注册STOMP协议节点，并且使用SockJS协议。 stompEndpointRegistry.addEndpoint("MyWebsocket").withSockJS(); } }

接下来我们要建立两个实体类，一个是接收客户端发来的消息类，一个是返回消息的类。

返回消息类：

package com.guanglan.entry; /** * 返回消息类 * Created by GuangLan on 2017/12/21. */ public class ResponseMessage { private String name; //消息发送者 private String message; //消息内容 private String dateTime; //发送时间 public ResponseMessage(String name, String message,String dateTime){ this.name = name; this.message = message; this.dateTime = dateTime; } public String getResponseMessage(){ return "发送时间 : "+dateTime+"\n"+name+" : "+message+" "; } }

接收消息类：

package com.guanglan.entry; /** * 接收消息类 * Created by GuangLan on 2017/12/21. */ public class RequestMessage { private String name; //消息发送者 private String message; //消息内容 public String getName() { return name; } public void setName(String name) { this.name = name; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } }

接下来，我们建立接收消息和发送消息的控制类：

package com.guanglan.controller; import com.guanglan.entry.RequestMessage; import com.guanglan.entry.ResponseMessage; import org.springframework.messaging.handler.annotation.MessageMapping; import org.springframework.messaging.handler.annotation.SendTo; import org.springframework.stereotype.Controller; import java.time.LocalDateTime; import java.time.format.DateTimeFormatter; /** * Created by GuangLan on 2017/12/21. */ @Controller public class WebSocketController { @MessageMapping("/guanglan") //客户端请求的地址 @SendTo("/topic/getResponse") //返回给客户端消息的地址 public ResponseMessage responseMessage(RequestMessage message) { //获取当前时间 LocalDateTime localDateTime = LocalDateTime.now(); DateTimeFormatter format = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"); //将从服务端接受的信息返回到页面上 return new ResponseMessage(message.getName(),message.getMessage(),localDateTime.format(format)); } }

这样主体流程就差不多了，我们在templates中建立一个名字为websocket的html5文件，并写入以下内容：

<html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>公共聊天室WebSocket</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script> <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body onload="disconnect()"> <noscript><h2 style="color: #e80b0a;">Sorry，浏览器不支持WebSocket</h2></noscript> <div> <div> <button id="connect" onclick="connect();" class="btn btn-success" style="width: 200px;height:60px;">连接</button> <button id="disconnect" disabled="disabled" onclick="disconnect();" class="btn btn-danger" style="width: 200px;height:60px;">断开</button> </div> <div id="conversationDiv"> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" class="form-control" placeholder="输入你的名字" style="width: 500px;"/> </div> <div class="form-group"> <textarea id="message" class="form-control" rows="3" style="width: 500px;"> </textarea> </div> <button type="button" class="btn btn-info" id="sendName" onclick="sendName();">发送</button> <br/> <div class="form-group"> <p id="response"></p> </div> </div> </div> <script type="text/javascript"> var stompClient = null; function setConnected(connected) { document.getElementById("connect").disabled = connected; document.getElementById("disconnect").disabled = !connected; document.getElementById("conversationDiv").style.visibility = connected ? 'visible' : 'hidden'; $("#response").html(); } function connect() { var socket = new SockJS('/MyWebsocket'); stompClient = Stomp.over(socket); stompClient.connect({}, function (frame) { setConnected(true); stompClient.subscribe('/topic/getResponse', function (response) { showResponse(JSON.parse(response.body).responseMessage); }) }); } function disconnect() { if (stompClient != null) { stompClient.disconnect(); } setConnected(false); } function sendName() { var name = $('#name').val(); var message = $('#message').val(); stompClient.send("/guanglan", {}, JSON.stringify({'name': name,'message':message})); } function showResponse(message) { $("#response").append("<br/>"+message); } </script> </body> </html>

马上就要大功告成了，不要气馁哦，我们在建立一个映射HTML5文件的类就OK了：

package com.guanglan.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ViewControllerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; /** * Created by GuangLan on 2017/12/21. */ @Configuration public class WebMvcConfig extends WebMvcConfigurerAdapter { @Override public void addViewControllers(ViewControllerRegistry registry) { //访问路径以及页面文件的名字 registry.addViewController("/websocket").setViewName("/websocket"); } }

这样一个简易的WebSocket聊天室就完成了。

主页面

如果您按照上述地址访问后出现上面的页面那么恭喜您搭建成功了！

下面看看效果吧

效果图

点击链接后会出现聊天室的页面，我在浏览器上建立了三个连接，分别发送了消息，效果如上。

好了，今天的基于SpringBoot的简易公共聊天室就讲到这里，如果您喜欢小编的作品请关注哦！