在spring boot中使用webSocket组件（一）
最近在项目中使用到了spring的webSocket组件，在这里和大家分享下，如有错误，欢迎大家指正。
在这里我使用的IDE工具是Intellij idea，框架是spring boot。spring boot的主要功能是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。（简单点讲就是帮你整合好了框架，不用自己搭建了，不用再写xml配置文件了！！！）
一，首先先搭建spring boot的框架，如图：File-->New-->Project,
然后会进入以下页面，选择左边的Spring Initiailzr,然后next
下图，用来编辑自己项目的一些信息，可以根据自己的需求进行编辑，然后next
下图，用来选择spring boot的一些服务，我们这里选择（websocket和Thymeleaf），
在这里选择什么组件，spring boot就会帮你下载对应的jar包，是不是很方便啊。
Thymeleaf是一个JAVA库，一个XML/XHTML/HTML5的可扩展的模板引擎，并且它可以在WEB和非WEB环境下运行。
（在本人使用Thymeleaf的过程中感觉功能类似JSP中的EL表达式，可能更加强大，将在下次进行讲解）
下图，填写项目名和项目存放路径，然后finish
二，spring boot环境搭建好后，开始写代码！！
1.首先先加入三个JS，如图：
2.创建WebSocketConfig类，代码如下：
package com.wisely.ch7_6; 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; @Configuration
@EnableWebSocketMessageBroker//1
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer{
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/endpointWisely").withSockJS(); //2
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic");//3
}
}
(1),@EnableWebSocketMessageBroker注解用于开启使用STOMP协议来传输基于代理（MessageBroker）的消息，这时候控制器（controller）开始支持@MessageMapping,就像是使用@requestMapping一样。
(2),注册一个Stomp的节点（endpoint）,并指定使用SockJS协议。
(3),配置消息代理（MessageBroker）。
3.创建WiselyMessage类（浏览器向服务器传送消息，用该类进行接收），代码如下：
package com.wisely.ch7_6.domain;
public class WiselyMessage {
private String name;
public String getName(){
return name;
}
}
4.创建WiselyResponse类（服务器向浏览器传送消息，用该类进行传送），代码如下：
package com.wisely.ch7_6.domain;
public class WiselyResponse {
private String responseMessage;
public WiselyResponse(String responseMessage){
this.responseMessage = responseMessage;
}
public String getResponseMessage(){
return responseMessage;
}
}
5.创建WsController类，代码如下：
@Controller
public class WsController {
@MessageMapping("/welcome")//1
@SendTo("/topic/getResponse")//2
public WiselyResponse say(WiselyMessage message) throws Exception {
return new WiselyResponse("Welcome, " + message.getName() + "!");
}
}
(1)@MessageMapping和@RequestMapping功能类似，用于设置URL映射地址，浏览器向服务器发起请求，需要通过该地址。
(2)如果服务器接受到了消息，就会对订阅了@SendTo括号中的地址传送消息。
6.创建前端页面ws.html,代码如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Spring Boot+WebSocket+广播式</title> </head>
<body onload="disconnect()">
<noscript><h2 style="color: #ff0000">貌似你的浏览器不支持websocket</h2></noscript>
<div>
<div>
<button id="connect" onclick="connect();">连接</button>
<button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
</div>
<div id="conversationDiv">
<label>输入你的名字</label><input type="text" id="name" />
<button id="sendName" onclick="sendName();">发送</button>
<p id="response"></p>
</div>
</div>
<script th:src="@{sockjs.min.js}"></script>
<script th:src="@{stomp.min.js}"></script>
<script th:src="@{jquery.js}"></script>
<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('/endpointWisely'); //1
stompClient = Stomp.over(socket);//2
stompClient.connect({}, function(frame) {//3
setConnected(true);
console.log('开始进行连接Connected: ' + frame);
stompClient.subscribe('/topic/getResponse', function(respnose){ //4
showResponse(JSON.parse(respnose.body).responseMessage);
});
});
} function disconnect() {
if (stompClient != null) {
stompClient.disconnect();
}
setConnected(false);
console.log("Disconnected");
} function sendName() {
var name = $('#name').val();
stompClient.send("/welcome", {}, JSON.stringify({ 'name': name }));//
} function showResponse(message) {
var response = $("#response");
response.html(message);
}
</script>
</body>
</html>
（1）连接SockJS的endpoint是“endpointWisely”，与后台代码中注册的endpoint要一样。
（2）创建STOMP协议的webSocket客户端。
（3）连接webSocket的服务端。
（4）通过stompClient.subscribe（）订阅服务器的目标是'/topic/getResponse'发送过来的地址，与@SendTo中的地址对应。
（5）通过stompClient.send（）向地址为"/welcome"的服务器地址发起请求，与@MessageMapping里的地址对应。
7.创建WebMvcConfig类（该类的作用是可以为ws.html提供便捷的地址映射,只需要在地址栏里面输入localhost:8080/ws,就会找到ws.html），代码如下：
package com.wisely.ch7_6; import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; @Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter{ @Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/ws").setViewName("/ws");
}
}
8.然后点击启动按钮就可以了（红色箭头所指），如图：
9.浏览器连开三个页面，如图所示：
10.随意使用其中一个页面进行消息的发送，其它两个页面都会接受到发送的消息，如图所示：
到此为止，websocket的广播式发送演示完毕，如有错误，欢迎大家指正。（下篇将演示websocket如何向特定目标发送消息，类似聊天室）
在spring boot中使用webSocket组件（一）的更多相关文章
- 在spring boot中使用webSocket组件（二）
该篇演示如何使用websocket创建一对一的聊天室,废话不多说,我们马上开始! 一.首先先创建前端页面,代码如下图所示: 1.login.html <!DOCTYPE html> < ...
- 禁用 Spring Boot 中引入安全组件 spring-boot-starter-security 的方法
1.当我们通过 maven 或 gradle 引入了 Spring boot 的安全组件 spring-boot-starter-security,Spring boot 默认开启安全组件,这样我们就 ...
- Spring Boot中使用Websocket搭建即时聊天系统
1.首先在pom文件中引入Webscoekt的依赖 <!-- websocket依赖 --> <dependency> <groupId>org.springfra ...
- Spring Boot 中使用 WebSocket 实现一对多聊天及一对一聊天
为什么需要WebSocket? 我们已经有了http协议,为什么还需要另外一个协议?有什么好处? 比如我想得到价格变化,只能是客户端想服务端发起请求,服务器返回结果,HTTP协议做不到服务器主动向客户 ...
- （转）Spring Boot 2 (十)：Spring Boot 中的响应式编程和 WebFlux 入门
http://www.ityouknow.com/springboot/2019/02/12/spring-boot-webflux.html Spring 5.0 中发布了重量级组件 Webflux ...
- Spring Boot 2 (十)：Spring Boot 中的响应式编程和 WebFlux 入门
Spring 5.0 中发布了重量级组件 Webflux,拉起了响应式编程的规模使用序幕. WebFlux 使用的场景是异步非阻塞的,使用 Webflux 作为系统解决方案,在大多数场景下可以提高系统 ...
- spring boot(三)：Spring Boot中Redis的使用
spring boot对常用的数据库支持外,对nosql 数据库也进行了封装自动化. redis介绍 Redis是目前业界使用最广泛的内存数据存储.相比memcached,Redis支持更丰富的数据结 ...
- Spring Boot中的注解
文章来源:http://www.tuicool.com/articles/bQnMra 在Spring Boot中几乎可以完全弃用xml配置文件,本文的主题是分析常用的注解. Spring最开始是为了 ...
- Spring Boot：Spring Boot 中 Redis 的使用
Redis 介绍 Redis 是目前业界使用最广泛的内存数据存储.相比 Memcached,Redis 支持更丰富的数据结构,例如 hashes, lists, sets 等,同时支持数据持久化.除此 ...
随机推荐
- TDH-ssh免密登录
[root@tw-node118 ~]# ssh-keygen -t rsa -P '' 这个指令会在/root/.ssh下生成id_rsa和id_rsa.pub文件.看一下/root/.ssh下的文 ...
- 牛客网Java刷题知识点之什么是内部类、为什么要使用内部类、内部类如何使用外部类的属性和方法、成员内部类、局部内部类、静态内部类、匿名内部类
不多说,直接上干货! 可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类是一个非常有用的特性但又比较难理解使用的特性(鄙人到现在都没有怎么使用过内部类,对内部类也只是略知一二). 内部类 ...
- 项目协作管理平台-teambition和tapd--深度体验
一.分析目的 通过分析2B产品中的团队协作管理软件的对比分析,用于为公司团队协作软件的选型做产考. 二.竞品归属市场概况 2.1.目标用户群及需求 主要面向企业用户,用于解决企业不同地域以及不同职 ...
- 在docker上centos7 编译安装php7
docker镜像来自daocloud.io/library/centos 首先下载libmcrypt库并make && make install yum -y install gcc ...
- HTML5标签选择指引
- Ionic 2 中的创建一个闪视卡片组件
闪视卡片是记忆信息的重要工具,它的使用可以追溯到19世纪.我们将要创建一个很酷的短暂动画来实现它.看起来像是这个样子的: 闪视卡片示例 Ionic 2 实例开发 新增章节将为你介绍如何在Ionic 2 ...
- socket tcp使用recv接收数据时，返回errno错误代码88
原因:就是recv函数的第一个参数不是可用的,也就是第一个参数不是建立连接时返回的文件描述符． 解决方法:xxx
- c/c++的const和static区别
C语言中的const和static用来修饰变量或者函数,用const修饰表示不可改变,用static修饰表示变量或者函数是静态的,作用域控制在函数内. const定义的常量在超出其作用域之后其空间会被 ...
- hiho一下 第四十四周 博弈游戏·Nim游戏（直接公式解）
证明看这http://hihocoder.com/contest/hiho44/problem/1 思路: 设 sg=a[1]^a[2]^...a[n],若sg=0,则先手Alice必败,否则必赢. ...
- [中文翻译] ASP.NET 5 简介（Introducing ASP.NET 5，原作ScottGu 2015/2/23）
本文出处 [中文翻译] ASP.NET 5 简介(Introducing ASP.NET 5,原作ScottGu 2015/2/23) 这是我的文章备份 http://www.dotblogs.co ...