在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的依赖  <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 等,同时支持数据持久化.除此 ...

随机推荐

牛客网Java刷题知识点之抽象类与接口
不多说,直接上干货! 接口和内部类为我们提供了一种将接口与实现分离的更加结构化的方法. 抽象类与接口是Java语言中对抽象概念进行定义的两种机制,正是由于它们的存在才赋予java强大的面向对象的能力. ...
Json 后台转对象的方式或者获取属性值方式。
类似这类的 json字符串后台转成 model 或者取其中一个属性值. 需要去掉前后引号以及将转义字符去掉.空格代替 resoult = resoult.Substring(0, resoult. ...
MVC下载文件方式包括网络地址文件
MVC下载文件方式方式一: public FileStreamResult DownFile(string filePath, string fileName){ string absol ...
windows下利用intellij idea等工具开发erlang
今天突然想在家里去年新买的电脑上写点erlang代码,然后可耻的发现家里的电脑上竟然没有开发环境,果然是去年6月以后没写过erlang代码么╮(╯▽╰)╭? 首先下载需要用的几样东西: ...
Java面向对象（类、封装）
面向对象今日内容介绍 u 面向对象 u 封装第1章面向对象 1.1 理解什么是面向过程.面向对象面向过程与面向对象都是我们编程中,编写程序的一种思维方式. l 面向过程的程序设计方式,是遇到一 ...
OPEN SQL
OPEN SQL 1.SELECT .INSERT.UPDATE.DELETE.MODIFYSELECT 命令包含如下从句:SELECT: 需要查询资料库指定表的那些列,是一行还是多行INTO: 查询 ...
js的加密和解密
最近在研究js的加密和解密的问题,上网上搜出来很多方法,不过不知道到底哪一个会比较管用.这里是今天找到的一些关于base64加密解密的js代码,已经经过试验,可以使用,不过网上很多加密解密的工具,这种 ...
（笔记）快速入门PADS logic 到 layout
以前从未接触过画板,先是硬着头皮边学边操作<Layout2007中文教程之PADS_Logic>,刚好在中秋节前把这个教程从头到尾通学了一遍,随后感觉这个教程有了方方面面但没有工程的系统性 ...
CoreData介绍
http://blog.csdn.net/zh952016281/article/details/52105683 写在前面在CoreData中有一些常用的类,称呼可能各不相同.所以这里先约定一些关 ...
fork新建进程
#include <sys/types.h>#include<sys/wait.h>#include<unistd.h>#include<stdio.h> ...

在spring boot中使用webSocket组件（一）

在spring boot中使用webSocket组件（一）的更多相关文章

随机推荐

热门专题