Web在线聊天室(4) --- 详细设计

1. WebSocket

1.1 举例WebSocket应用

业务背景:张三要发送消息给李四

实现
(1)客户端点到点发送消息
(2)服务端转发消息(我们采取这种方式)

流程

  1. 张三发送消息给服务端
  2. 服务端发送消息给李四

在这里插入图片描述
这种是基于http协议的与服务端建立连接相互请求和响应

这种方式用http去实现是不行的

  1. 因为http是短连接,无状态的,一次请求完了服务器一次响应后就会断开连接。
  2. 服务器端的 ip 是开放在公网的,所有人能访问;而客户端的 ip 是不开放的(服务端不知道),所以服务器端不能主动给客户端发送消息

在这里插入图片描述
我们会采取这种服务器转发消息方式来实现消息发送。

我们这里用到 webSocket 技术

1.2 webSocket 实现的消息推送流程

(1)客户端和服务器端建立连接,只能客户端发起请求,然后双方建立连接(长连接)

客户端 js 代码:

websocket = new WebSocket("ws://localhost:8080/java_chatroom/test/1");

双方建立连接后:事件驱动的异步函数回调

(2)双方通信都是全双工的,客户端和服务端都可以主动的收发消息

客户端发消息websocket.send(message)

服务端发消息session.getBasicRemote().sendText(message)

这里的Session对象用来保持会话的,这是建立连接之后,就有的会话对象,只要我们有session引用,就可以发消息。

注意事项:session会话,是WebSocket的会话(长连接没关闭就是一个会话),和Servlet的session是不一样的

双方接收消息:被动接收(事件驱动的异步回调)

1.3 整个流程涉及到的主要代码

在这里插入图片描述

目前项目中,业务是需要把张三发送的消息转发到所有的客户端中,这里是由前端去过去某个消息频道的消息

前端保存有所有接收的消息,用户进入某个频道后,在接收的消息列表中,过滤并显示

张三的消息 + 渠道A —》发送到所有客户端 —》 李四在渠道C,接收到的消息,过滤只显示C渠道

在这里插入图片描述

2. 详细设计

2.1 前后端接口流程

用户相关接口:

  1. 注册
  2. 登录:输入账号密码,点击登录按钮后,调用的接口
  3. 检查是否已登录:页面初始化后,调用接口

分析以上接口和页面的执行流程(关联关系)
在这里插入图片描述
以上业务,客户端接收消息有两个场景:

  1. 上次登录之后 —》 数据库查询(发送的消息要保存在数据库)
    –》服务端建立连接事件
  2. 新的消息 --》 服务端接收消息事件中
    –》所有客户端转发消息

需要考虑:服务端在什么时候代码进行发送,客户端在什么地方接收
消息在服务端什么地方保存

2.2 前后端接口设计

2.2.1 用户管理

注册

请求:
POST /register
{
   
   
	name: xxx,
	password: xxx,
	nickName: "蔡徐坤",
	signature: "我擅长唱跳rap篮球",
}

响应:
HTTP/1.1 200 OK
{
   
   
	ok: true,
	reason: xxx
}

登录

请求:
POST /login
{
   
   
	name: xxx,
	password: xxx
}

响应:
HTTP/1.1 200 OK
{
   
   
	ok: true,
	reason: xxx,
	userId: xxx,
	name
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值