Spring Boot WebSocket介绍(一)

最近在做一些WebSocket相关的内容,简要看了一些相关的知识,为避免自己忘记和遗漏一些内容,简单整理一下相关知识。本文作为WebSocket介绍的第一篇,比较简单,主要介绍如何在Spring Boot框架中使用自带的WebScoket功能。

完整的代码在这里,欢迎加星,fork。本文代码是在官方示例代码基础上稍加修改而成的。本人是后端,前端页面基本上时照猫画虎修改修改而成,仅供测试演示使用。

添加依赖

pom.xml文件在https://github.com/yqbjtu/websocketTutorials/blob/master/WebSocketBasic/pom.xml。
简要介绍,本示例程序使用Spring Boot 2.0.1.

核心依赖如下

        <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>

附属依赖如下,本示例程序同时提供两个简单的前端页面,供演示使用,这两个前端页面用到如下内容,如果你是前后端分离的,有自己的前端完成socket连接、订阅、发送、接收。 就不需要引入如下这些包,直接使用你的前端就行。

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>webjars-locator-core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>sockjs-client</artifactId>
            <version>1.0.2</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>stomp-websocket</artifactId>
            <version>2.3.3</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>3.3.7</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.1.0</version>
        </dependency>

主要代码

提供自己的WebSocketMessageBrokerConfigurer实现类

package com.yq.config;

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
@Slf4j
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/myEndPoint")         //开启/myEndPoint端点
                .setAllowedOrigins("*")         //允许跨域访问
                .withSockJS();                  //使用sockJS
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/myPrefixes");  //订阅topic的前缀,比订阅topic必须是这种格式// /myPrefixes/topic1/xxx
    }
}

简要说明:
a, endpoint 部分,如你的endPoint是xyz, 那么你连接的url格式就是var sockjs_url = ‘http://{ip}:{port}/xyz’;
b,跨域问题,如果没有配置好允许来自哪些前端的连接,当你连接websocket就会报跨域问题,最典型的的,如果你的前端域名是http://a.b.c:99, 那你允许的origins就必须包含来自a.b.c的域名且端口为99的连接
c,topic前缀,设置好topic的前缀后,你订阅topic的格式/myPrefixes/{youTopciPart01}/{youTopciPart012, 或者/myPrefixes/{yourTopic}

效果截图

index.html订阅了/myPrefixes/topic01/705117a0cf1a487e8df6902dd5ece030 topic,也会向topic发送内容(内容为json格式,只有一个字段"myfield1")。

myindex.html也订阅了/myPrefixes/topic01/705117a0cf1a487e8df6902dd5ece030 topic,也会向该topic发送内容(内容为json格式,格式为{“myfield1”:“myindex.html中的输入1”,“message”:“myindex.html中的输入2”})。

因此当myindex.html也向/myPrefixes/topic01/705117a0cf1a487e8df6902dd5ece030 发送消息时,index.html也会收到消息并显示,例如,会显示{“myfield1”:“myindex.html中的输入1”,“message”:“myindex.html中的输入2”}中的"myindex.html中的输入1" 部分

因此当index.html也向/myPrefixes/topic01/705117a0cf1a487e8df6902dd5ece030 发送消息时,myindex.html也会收到消息并显示,例如{“myfield1”:“index.html中的输入”}.

在这里插入图片描述

其他

关于service和controller部分,主要是SimpMessagingTemplate以及@MessageMapping和@SendTo注解,为服务间调用提供接口,后面有空再介绍。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值