国庆七天乐，写博也快乐之前后台小系统(Springboot+vue3+typescript+vite)+微信小程序消息自动推送实战一项目准备和websocket知识巩固_springcloud+websocket +vue3 +typescript-优快云博客

本文介绍了一个使用Springboot、Vue3、TypeScript和WebSocket实现微信小程序消息自动推送的项目。首先，概述了WebSocket协议的作用和特点，接着分别讲述了后端使用Spring Boot准备WebSocket服务，添加相关依赖；前端使用Vue3和Vite初始化项目，配置WebSocket连接。文章以项目搭建为主，预告下期将进入实际开发阶段，包括微信小程序的构建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

hello，各位小伙伴们大家好，这里是X，最近有人私信我，让我玩玩Websocket消息推送的功能，这个功能实现呢不算太复杂，和后端实现这个功能几乎一摸一样🤭🤭🤭如果玩过websocket的朋友这篇博文里的内容对你来说基本无难度🐶🐶如果没玩过的话那就要认真看下去啦😏😏这也是我之前项目的一个小功能，刚好来分享一下⭐⭐
注意：这是一个完整的前后端+小程序的demo，项目比较大，所以要分为2-3篇博客来完成，今天是项目搭建和websocket认识以及项目一些小注意点吧，从0开始的后台系统项目，国庆这几天会出完整代码教程，欢迎点赞、评论和收藏😎😎

Websocket 🥪

了解一波websocket吧~

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

太牛逼了，每次使用websocket都有这种感觉😭😭😭
玩消息最明显的特点就是：消息，它是有不同的类型的

与HTTP不同的是，Websocket需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息。而HTTP请求可能需要在每个请求都携带状态信息（如身份认证等）。

后端准备🌮

创建一个spring boot项目，这里直接演示了，可以参考我的，也可以自行根据自己的项目来，注意一定要加入websocket的依赖，下面是我添加的依赖，大家可以参考哈😏

 <dependencies>
        <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>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.72