springboot整合websocket

释放双眼,带上耳机,听听看~!

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

现在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。
springboot整合websocket

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。

以下 API 用于创建 WebSocket 对象。


1
2
3
1var Socket = new WebSocket(url, [protocol] );
2
3

下面我们开始springboot整合websocket,github:https://github.com/fengqing11/springboot-websocket

创建项目,依赖如下:
spring-boot-starter-websocket是websocket的相关依赖,其他都是前端库。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
1<?xml version="1.0" encoding="UTF-8"?>
2<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
3         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
4    <modelVersion>4.0.0</modelVersion>
5    <parent>
6        <groupId>org.springframework.boot</groupId>
7        <artifactId>spring-boot-starter-parent</artifactId>
8        <version>2.2.4.RELEASE</version>
9        <relativePath/> <!-- lookup parent from repository -->
10    </parent>
11    <groupId>xyz.fengqing11</groupId>
12    <artifactId>springboot-webscoket</artifactId>
13    <version>0.0.1-SNAPSHOT</version>
14    <name>springboot-webscoket</name>
15    <description>Demo project for Spring Boot</description>
16
17    <properties>
18        <java.version>1.8</java.version>
19    </properties>
20
21    <dependencies>
22        <dependency>
23            <groupId>org.springframework.boot</groupId>
24            <artifactId>spring-boot-starter-websocket</artifactId>
25        </dependency>
26        <dependency>
27            <groupId>org.webjars</groupId>
28            <artifactId>webjars-locator-core</artifactId>
29        </dependency>
30        <dependency>
31            <groupId>org.webjars</groupId>
32            <artifactId>sockjs-client</artifactId>
33            <version>1.1.2</version>
34        </dependency>
35        <dependency>
36            <groupId>org.webjars</groupId>
37            <artifactId>stomp-websocket</artifactId>
38            <version>2.3.3</version>
39        </dependency>
40        <dependency>
41            <groupId>org.webjars</groupId>
42            <artifactId>jquery</artifactId>
43            <version>3.3.1</version>
44        </dependency>
45
46        <dependency>
47            <groupId>org.springframework.boot</groupId>
48            <artifactId>spring-boot-starter-test</artifactId>
49            <scope>test</scope>
50            <exclusions>
51                <exclusion>
52                    <groupId>org.junit.vintage</groupId>
53                    <artifactId>junit-vintage-engine</artifactId>
54                </exclusion>
55            </exclusions>
56        </dependency>
57    </dependencies>
58
59    <build>
60        <plugins>
61            <plugin>
62                <groupId>org.springframework.boot</groupId>
63                <artifactId>spring-boot-maven-plugin</artifactId>
64            </plugin>
65        </plugins>
66    </build>
67
68</project>
69
70

配置websocket:
继承WebSocketMessageBrokerConfigurer进行websocket配置,然后通过@EnableWebSocketMessageBroker注解开启websocket消息代理。
enableSimpleBroker("/topic","/queue")如果消息的前缀是/topic,就会将消息转发给消息代理,然后由消息代理将消息广播给客户端。
setApplicationDestinationPrefixes("/app"):表示配置一个或多个前缀,通过这些前缀过滤出需要被注解方法处理的消息。例如,前缀为/app的destination可以通过@MessageMapping注解的方法处理,而其他的destination则交给broker处理。
addEndpoint("/chat").withSockJS():定义一个前缀为/chat的endPoint,并开启sockjs支持,sockjs可以解决浏览器对websocket的支持问题,客户端将通过这里配置的URL来建立Websocket连接。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1package xyz.fengqing11.springbootwebscoket.config;
2
3import org.springframework.context.annotation.Configuration;
4import org.springframework.messaging.simp.config.MessageBrokerRegistry;
5import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
6import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
7import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
8
9@Configuration
10@EnableWebSocketMessageBroker
11public class WebSocketConfig
12        implements WebSocketMessageBrokerConfigurer {
13    @Override
14    public void configureMessageBroker(MessageBrokerRegistry config) {
15        config.enableSimpleBroker("/topic","/queue");
16        config.setApplicationDestinationPrefixes("/app");
17    }
18    @Override
19    public void registerStompEndpoints(StompEndpointRegistry registry) {
20        registry.addEndpoint("/chat").withSockJS();
21    }
22}
23
24

定义Controller:
@MessageMapping("/hello")注解用来接收/app/hello路径发送来的消息,在注解方法处理后再转发到@SendTo定义的路径上,而定义的路径是/topic,所以该消息将被转交给消息代理broker,再有broker广播。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1package xyz.fengqing11.springbootwebscoket.controller;
2
3import org.springframework.messaging.handler.annotation.MessageMapping;
4import org.springframework.messaging.handler.annotation.SendTo;
5import org.springframework.stereotype.Controller;
6import xyz.fengqing11.springbootwebscoket.pojo.Message;
7
8@Controller
9public class GreetingController {
10    @MessageMapping("/hello")
11    @SendTo("/topic/greetings")
12    public Message greeting(Message message) throws Exception {
13        return message;
14    }
15}
16
17

构建聊天页面:
在static下构建chat.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>群聊</title>
6    <script src="/webjars/jquery/jquery.min.js"></script>
7    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
8    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
9    <script src="/app.js"></script>
10</head>
11<body>
12<div>
13    <label for="name">请输入用户名:</label>
14    <input type="text" id="name" placeholder="用户名">
15</div>
16<div>
17    <button id="connect" type="button">连接</button>
18    <button id="disconnect" type="button" disabled="disabled">断开连接</button>
19</div>
20<div id="chat"style="display: none;">
21    <div>
22        <label for="name">请输入聊天内容:</label>
23        <input type="text" id="content" placeholder="聊天内容">
24    </div>
25    <button id="send" type="button">发送</button>
26    <div id="greetings">
27        <div id="conversation"style="display: none">群聊进行中...</div>
28    </div>
29</div>
30</body>
31</html>
32
33

app.js
connect()方法表示建立websocket连接,在此之前需要输入用户名


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
1var stompClient = null;
2function setConnected(connected) {
3    $("#connect").prop("disabled", connected);
4    $("#disconnect").prop("disabled", !connected);
5    if (connected) {
6        $("#conversation").show();
7        $("#chat").show();
8    }
9    else {
10        $("#conversation").hide();
11        $("#chat").hide();
12    }
13    $("#greetings").html("");
14}
15function connect() {
16    if (!$("#name").val()) {
17        return;
18    }
19    var socket = new SockJS('/chat');
20    stompClient = Stomp.over(socket);
21    stompClient.connect({}, function (frame) {
22        setConnected(true);
23        stompClient.subscribe('/topic/greetings', function (greeting) {
24            showGreeting(JSON.parse(greeting.body));
25        });
26    });
27}
28function disconnect() {
29    if (stompClient !== null) {
30        stompClient.disconnect();
31    }
32    setConnected(false);
33}
34function sendName() {
35    stompClient.send("/app/hello",
36        {},
37        JSON.stringify({'name': $("#name").val(),'content':$("#content").val()}));
38}
39function showGreeting(message) {
40    $("#greetings")
41        .append("<div>" + message.name+":"+message.content + "</div>");
42}
43
44$(function () {
45    $( "#connect" ).click(function() { connect(); });
46    $( "#disconnect" ).click(function() { disconnect(); });
47    $( "#send" ).click(function() { sendName(); });
48});
49
50

测试:访问http://127.0.0.1:8080/chat.html

springboot整合websocket
换一个浏览器访问http://127.0.0.1:8080/chat.html

springboot整合websocket


-end-

给TA打赏
共{{data.count}}人
人已打赏
安全技术

Ubuntu下安装Mysql 以及mysql-query-browser

2022-1-11 12:36:11

气候事件

台风“玛莉亚”将严重影响福建

2018-7-9 0:01:33

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索