基于（webSocket）搭建一个双人匹配聊天的在线网站

本文链接：https://blog.csdn.net/languageStudent/article/details/124036897

本文介绍了如何利用SpringBoot构建WebSocket服务器，配合Vue实现前端实时聊天功能，包括技术栈选择、Maven依赖配置、服务器端和客户端的连接过程，以及生命周期回调函数。分享了从代码部署到基本操作的完整步骤。

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

文章目录

网站效果：
gitee地址
技术栈
- maven依赖
webSocket服务器搭建
gitee地址

网站效果：

在这里插入图片描述

gitee地址

（前端）在线聊天-Vue。Gitee地址
 （后端）在线聊天gitee地址

Fork->clone->打包->部署私人聊天室不是梦😄😄

技术栈

服务：springboot,websocket长连接服务
前端：vue
通过websocket进行通信

maven依赖

引入springboot额外添加一个websocket相关依赖

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

webSocket服务器搭建

引入websocket服务后。我们需要创建一个类，并添加注解指定服务对外开放姐服务地址；

在这里插入图片描述
其中地址内有{}包裹是可以通过地址来接受的参数，上图可以接受用户名及性别。

webSocket生命周期对应的函数回调

服务端：

有客户端连接时：onOpen，在函数上添加该注解，当客户端连接时则会立即执行该函数。发生对应其他状态时也会执行特定函数
连接的回调函数可以接受当前连接的会话，可以通过session发送消息，客户端连接有不同的会话，通过会话session可以发送消息，断开连接等操作
收到客户端发送的消息时：onMessage
可以接受收到的字符消息
出现异常情况时：onError
连接断开时：onClose

搭建使用：
在这里插入图片描述

启动springboot项目，就启动了webSocket服务。

客户端：

客户端使用webSocket连接服务器时，使用js的WebSocket对象创建连接
前端wensocket连接websocket服务代码

this.ws = new WebSocket(`ws://localhost:3000/chat/${this.from.fromName}/${this.from.fromSex}`)

ws: w:web s:Socket 使用webSocket协议进行连接。

后面则是连接的地址。可以在地址放一些参数。后台同样配置可以接收

创建成功后会返回一个webSocket对象，该对象需要给不同的生命周期设置一个回调。
生命周期痛服务端一样。

连接上服务端时：onOpen，在函数上添加该注解，当客户端连接时则会立即执行该函数。发生对应其他状态时也会执行特定函数
连接的回调函数可以接受当前连接的会话，可以通过session发送消息，客户端连接有不同的会话，通过会话session可以发送消息，断开连接等操作
收到客户端发送的消息时：onmessage
可以接受收到的字符消息
出现异常情况时：onerror
连接断开时：onclose
如图,这个最简单的webSocket连接时的客户端并指定回调