黑马Java后端项目实战--在线聊天交友

妖狐艹你老母 2024-03-26 08:02 30阅读 0赞

【课程简介】

越来越多的系统都有消息推送的功能，如聊天室、邮件推送、系统消息推送等；

要实现消息推送就需要服务端在数据有变化时主动推送消息给客户端，本次课程将带大家使用websocket实现消息推送。

【主讲内容】

1.方法：如何快速上手新项目  
2.技术：消息推送方案+websocket原理  
3.实战：实现案例网页版聊天室

【课程详情】

[**Java后端项目实战--在线聊天交友**][Java_--]

**消息推送常用方式介绍**

![47e603bb281d4819a8d1b862b2dd6816.png][]

![3eff589e8a73410aaed8250e4e4ae0fe.png][]

**SSE****（****server-sent event****）：服务器发送事件**

SSE在服务器和客户端之间打开一个单向通道

服务端响应的不再是一次性的数据包，而是text/event-stream类型的数据流信息

服务器有数据变更时将数据流式传输到客户端

![0670763848f14a22846f02cec1756989.png][]

**WebSocket是一种在基于TCP连接上进行全双工通信的协议**

![87e67520025a4fd08f32b753a6eaee34.png][]

**说明：**

**全双工**（Full Duplex）：允许数据在两个方向上同时传输。

**半双工**（Half Duplex）：允许数据在两个方向上传输，但是同一个时间段内只允许一个方向上传输。

**原理解析**

![48b0cd72462440ce874ab99a7b550c77.png][]

**请求数据**

GET ws://localhost/chat HTTP/1.1

Host: localhost

Connection: Upgrade

Upgrade: websocket

Sec-WebSocket-Version: 13

Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==

Sec-WebSocket-Extensions: permessage-deflate

**响应数据**

HTTP/1.1 101 Switching Protocols

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

Sec-WebSocket-Extensions: permessage-deflate

**websocket** API

**客户端【浏览器】****API**

**websocket对象创建**

let ws = new WebSocket(URL);

格式：协议://ip地址/访问路径

协议：协议名称为 ws

**websocket对象相关事件**

![ee6e11dd93934c7c9dddb197cb72918e.png][]

**websocket对象提供的方法**

![b81c0df438f14515ab54f6bf3888caa4.png][]

**客户端【浏览器】****API**

![496ba72352b94f808e59fb796b72162c.png][]

**服务端** **API**

Tomcat的7.0.5 版本开始支持WebSocket,并且实现了Java WebSocket规范。

Java WebSocket应用由一系列的Endpoint组成。Endpoint 是一个java对象，代表WebSocket链接的一端，对于服务端，我们可以视为处理具体WebSocket消息的接口。

我们可以通过两种方式定义Endpoint:

第一种是编程式， 即继承类 javax.websocket.Endpoint并实现其方法。

第二种是注解式, 即定义一个POJO, 并添加 @ServerEndpoint相关注解。

Endpoint实例在WebSocket握手时创建，并在客户端与服务端链接过程中有效，最后在链接关闭时结束。在Endpoint接口中明确定义了与其生命周期相关的方法， 规范实现者确保生命周期的各个阶段调用实例的相关方法。生命周期方法如下**：**

![20f2b2220ca242919b8a192ae600ed1c.png][]

**服务端如何接收客户端发送的数据呢？**

**编程式**

通过添加 MessageHandler 消息处理器来接收消息

**注解式**

在定义Endpoint时，通过@OnMessage注解指定接收消息的方法

**服务端如何推送数据给客户端呢？**

发送消息则由 RemoteEndpoint 完成， 其实例由 Session 维护。

发送消息有2种方式发送消息

通过session.getBasicRemote 获取同步消息发送的实例 ， 然后调用其 sendXxx()方法发送消息

通过session.getAsyncRemote 获取异步消息发送实例，然后调用其 sendXxx() 方法发送消息

![4a12b8cd1b3742cb8e3e0f235b6cf864.png][]

### 项目实现---在线聊天室实现 ###

**需求：通过websocket实现在线聊天室**

![0f29556e436b4dfd925dc93354ee6eed.png][]

![65a84f59088b46e289ba5c8c916773d5.png][]

![421f7daf4e3c4171bcda3a58692de498.png][]

![1d855e790c674ad4b8f529c65051dd7d.png][]

**流程分析**

![92a1cca722d242368362d1fe5a919107.png][] **消息格式**

**客户端** **--> 服务端** \{"toName":"张三","message":"你好"\}

**服务端** **-->** **客户端**

①系统消息格式：\{"system":true,"fromName":null,"message"：\["李四","王五"\]\}

②推送给某一个用户的消息格式：\{"system":false,"fromName":"张三","message"："你好"\}

**代码实现**

**引入坐标**

![562452446d554ab283432108be528820.png][]

**编写配置类，扫描添加有@ServerEndpoint注解的 Bean**

![a0b02b04fa4f40fdbba4359ada9a1d3a.png][]

**编写配置类，用于获取** **HttpSession** **对象**

![4965b9c5698d46bc80b191843c4f3616.png][]**在** **@ServerEndpoint** **注解中引入配置器**

![7adaf95efa1d430fa8cfd33a6f08263e.png][]

[Java_--]: http://yun.itheima.com/open/846.html
[47e603bb281d4819a8d1b862b2dd6816.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f3c4be5a90704fbeb03371d54aedfce4.png
[3eff589e8a73410aaed8250e4e4ae0fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1d6ae1c086284823bec8041fb9271c32.png
[0670763848f14a22846f02cec1756989.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/72d5cb8f5f364c6593550f06f40b674f.png
[87e67520025a4fd08f32b753a6eaee34.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ab1169e91206465b8be15712b4203fce.png
[48b0cd72462440ce874ab99a7b550c77.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a30d11278f7546aa89143b530186c022.png
[ee6e11dd93934c7c9dddb197cb72918e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f189a562a2994a6dbaa567dc19e394ba.png
[b81c0df438f14515ab54f6bf3888caa4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d44b4ff9656e457289e889dbb9cd0715.png
[496ba72352b94f808e59fb796b72162c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/bd89052683cb491da7125bddfa6d03da.png
[20f2b2220ca242919b8a192ae600ed1c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/623250caa1a3403a839673567da49b72.png
[4a12b8cd1b3742cb8e3e0f235b6cf864.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/686ec81949224062a6092dd51b650a8b.png
[0f29556e436b4dfd925dc93354ee6eed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/03758196ae3542c5935c7630c1d9ef07.png
[65a84f59088b46e289ba5c8c916773d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4abe0d17c8ab4a90986d7603ceaf6769.png
[421f7daf4e3c4171bcda3a58692de498.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c350f8a73d324431b5d250d47e8d2e84.png
[1d855e790c674ad4b8f529c65051dd7d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/88682795eac84578a8eb4d82b69bab74.png
[92a1cca722d242368362d1fe5a919107.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0756f3a523c94a7d8519c949a730a3fc.png
[562452446d554ab283432108be528820.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6e1b7fc763da4729bfcbe863c9bd0362.png
[a0b02b04fa4f40fdbba4359ada9a1d3a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8b02864cbeac4867b729080308891942.png
[4965b9c5698d46bc80b191843c4f3616.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/cc87928d0b2f410faabf19dc0d980d9a.png
[7adaf95efa1d430fa8cfd33a6f08263e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/86590ed0fcd74389a2762333deea969f.png