SpringBoot 整合WebSocket 前端 uniapp 访问的详细方法

 更新时间:2023年09月02日 15:47:40   作者:tengyuxin  
这篇文章主要介绍了SpringBoot 整合WebSocket 前端 uniapp 访问的详细方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

第一次使用WebSocket,所以最需要一个及其简单的例子,跑通之后,增加自己对该技术的理解。(技术基础介绍就免掉了,后面再补)

 案例逻辑:目前只有一个用户,而且是一个用户给服务器发送数据,服务给该用户返回数据

一、SpringBoot 整合 WebSocket

此处的逻辑一共三步

第一步,添加依赖项

第二步,添加配置

第三,写基础服务类

 1. 添加websocket依赖

  <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
            <!--需要版本的自己加-->
  </dependency>

2. 添加配置

@Configuration
public class WebSocketConfig {
    /**
     * ServerEndpointExporter 作用
     *
     * 这个Bean会自动注册使用@ServerEndpoint注解声明的websocket endpoint
     *
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

3. 基础服务工具类

 
@ServerEndpoint(value = "/ws/{userId}")
@Component
@Slf4j
public class WebSocketServer {
    private String userId;
    /**
     * @param session 是webSocket的会话对象,不是浏览器那个session
     * @param userId  用户Id
     * @description 当连接建立成功调用
     **/
    @OnOpen
    public void onOpen(Session session, @PathParam("userId") String userId) {
        this.userId = userId;
        System.out.println("建立连接");
    }
    /**
     * @param session 会话对象
     * @description 当连接关闭调用
     **/
    @OnClose
    public void onClose(Session session) throws IOException {
        System.out.println("关闭连接");
    }
    /**
     * @param message 客户端发送的消息
     * @param session 会话对象
     * @description 当客户端发送消息时调用
     **/
    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        try{
            System.out.println(message);
           //给客户端发送消息
            session.getBasicRemote().sendText("服务端定义的消息");
        }catch(Exception e){
            e.printStackTrace();
        }
    }
}

二、uniapp 构建webSocket与服务器通信

前端逻辑

第一步:跟服务器建立连接

第二步:监听WebSocket连接打开事件,并在这个监听事件中,主动给服务端发送数据

第三步:监听WebSocket接受到服务器的消息事件(你给服务器发送消息时,它也会及时给前端返回数据)

1. 具体代码

 
function webSocketFun(Integer userId){
    //1. 通过用户唯一id 与 服务端webSocket建立连接
    uni.connectSocket({
	    url: `http://192.168.2.18:8080/ws/${userId}`
    });
    //2. 监听WebSocket连接打开事件,并给服务端发送消息
    var socketOpen = false;
	var socketMsgQueue = ["滕","禹","鑫"];
    uni.onSocketOpen(function (res) {
		console.log('WebSocket连接已打开');
		socketOpen = true;
		for (var i = 0; i < socketMsgQueue.length; i++) {
			sendSocketMessage(socketMsgQueue[i]);
		}
		socketMsgQueue = [];
	});
	function sendSocketMessage(msg) {
	  if (socketOpen) {
	    uni.sendSocketMessage({
	      data: msg
	    });
	  } else {
	    socketMsgQueue.push(msg);
	  }
	}
    //3. 监听WebSocket接受到服务器的消息事件
    uni.onSocketMessage(function (res) {
	  console.log('收到服务器返回的内容为 ======' + res.data);
	});
}
 

到此这篇关于SpringBoot 整合WebSocket 前端 uniapp 访问的文章就介绍到这了,更多相关SpringBoot 整合WebSocket 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Spring中@Lazy注解的使用示例教程

    Spring中@Lazy注解的使用示例教程

    Spring在应用程序上下文启动时去创建所有的单例bean对象, 而@Lazy注解可以延迟加载bean对象,即在使用时才去初始化,这篇文章主要介绍了Spring中@Lazy注解的使用,需要的朋友可以参考下
    2023-06-06
  • SpringBoot集成jjwt和使用方式

    SpringBoot集成jjwt和使用方式

    本文详细介绍了JWT依赖(以jjwt为例)的引入和使用方法,首先,需要在项目中引入jwt依赖,随后在Spring的启动类application.yml中进行相应配置,最后,提供了一份完整的jwt工具类代码,供读者直接使用,以上内容便是作者的个人经验分享,期望能为读者提供参考并得到支持
    2024-10-10
  • SpringBoot读取Resource目录下文件的四种方式总结

    SpringBoot读取Resource目录下文件的四种方式总结

    在Spring Boot项目中,经常需要获取resources目录下的文件,这些文件可以包括配置文件、模板文件、静态资源等,本文将介绍四种常用的方法来获取resources目录下的文件,需要的朋友可以参考下
    2023-08-08
  • SpringBoot3整合Hutool-captcha实现图形验证码

    SpringBoot3整合Hutool-captcha实现图形验证码

    在整合技术框架的时候,想找一个图形验证码相关的框架,看到很多验证码的maven库不再更新了或中央仓库下载不下来,还需要多引入依赖,后面看到了Hutool图形验证码(Hutool-captcha)中对验证码的实现,所以本文介绍了SpringBoot3整合Hutool-captcha实现图形验证码
    2024-11-11
  • Java并发应用之任务执行分析

    Java并发应用之任务执行分析

    这篇文章主要为大家详细介绍了JavaJava并发应用编程中任务执行分析的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2023-07-07
  • Java实现经典游戏俄罗斯方块(升级版)的示例代码

    Java实现经典游戏俄罗斯方块(升级版)的示例代码

    俄罗斯方块是一款风靡全球,从一开始到现在都一直经久不衰的电脑、手机、掌上游戏机产品,是一款游戏规则简单,但又不缺乏乐趣的简单经典小游戏。本文将用Java语言实现这一经典游戏,需要的可以参考一下
    2022-09-09
  • IDEA自定义Maven archetype的方法步骤

    IDEA自定义Maven archetype的方法步骤

    在创建Maven的项目时我们发现了一个很不方便的问题,就是每次创建Maven的工程的时候,都需要选择一个骨架,本文主要介绍了IDEA自定义Maven archetype的方法步骤,感兴趣的可以了解一下
    2022-03-03
  • Java中的equsals和==

    Java中的equsals和==

    这篇文章主要介绍了Java中的equsals和==的相关内容,感兴趣的朋朋友可以参考下文
    2021-08-08
  • Java中this()与super()的用法区别解析

    Java中this()与super()的用法区别解析

    this()调用本类构造函数复用代码,super()调用父类构造函数初始化继承,两者均需为构造函数首条语句,适用场景分别为代码复用和父类初始化,本文给大家介绍Java中this()与super()的用法区别,感兴趣的朋友跟随小编一起看看吧
    2025-08-08
  • Java中的有限状态机(设计模式——状态模式)

    Java中的有限状态机(设计模式——状态模式)

    这篇文章主要介绍了Java中的有限状态机(设计模式——状态模式),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-08-08

最新评论