【Spring Boot】使用WebSocket协议完成来单提醒及客户催单功能

1 WebSocket介绍

WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信(双向传输)——浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接， 并进行双向数据传输。

1.1 HTTP协议和WebSocket协议对比

1、HTTP是短连接，WebSocket是长连接
2、HTTP通信是单向的，基于请求响应模式，WebSocket支持双向通信
3、HTTP和WebSocket底层都是TCP连接

1.2 WebSocket缺点

1、服务器长期维护长连接需要一定的成本，各个浏览器支持程度不一，WebSocket是长连接，受网络限制比较大
2、WebSocket不能完全取代HTTP，适用于视频弹幕、王网页聊天和体育实况更新。

2 来单提醒

用户下单并且支付成功后，需要第一时间通知外卖商家。通知的形式有如下两种：
（1）语音播报
（2）弹出提醒框

2.1 设计思路：

（1）通过WebSocket实现管理端浏览器和服务端保持长连接状态
（2）当客户支付后，调用WebSocket的相关API实现服务端向管理端浏览器推送消息
（3）管理端浏览器解析服务端推送的消息，判断是来单提醒还是客户催单，进行相应的消息提示和语音播报
（4）约定服务端发送给管理端浏览器的数据格式为JSON，字段包括：type，orderId，content

private WebSocketServer webSocketServer;
/**
 * 支付成功，修改订单状态
 */
public void paySuccess(String outTradeNo){
	//当前登录用户Id
	Long userId = BaseContext.getCurrentId();
	// 根据订单号查询当前用户的订单
	Orders ordersDB = orderMapper.getByNumberAndUserId(outTradeNo,userId);
	// 根据订单id更新订单的状态、支付方式、支付状态、结账时间
	Orders orders = Orders.builder()
			.id(ordersDB.getId())
			.status(Orders.TO_BE_CONFIRMED)
			.payStatus(Orders.PAID)
			.checkoutTime(localSateTime.now())
			.build();
	orderMapper.update(orders);
	// map是一个JS对象
	Map map = new HashMap();
	map.put("type", 1);
	map.put("orderId", orders.getId());
	map.put("content", "订单号：" + outTradeNo);
	// JSON字符串发送给管理端浏览器
	//JSON.toJSONString()函数叫做序列化
	//JSON.parse()函数叫做反序列化
	webSocketServer.sendToAllClient(JSON.toJSONString(map));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

当商家管理端浏览器接收到这个消息之后, 前端代码负责其他工作。

2.2 什么是数据交换格式？

（1）数据交换格式，就是服务器端和客户端之间进行数据传输和交换的格式
（2）前端领域，经常提及的两种数据交换格式分别是XML和JSON。其中XML用的非常少。
（3）

XML
XML 的英文全称是 EXtensible Markup Language，即可扩展标记语言。因此，XML 和 HTML 类似，也是一种标记语言。
XML和HTML的区别：HTML被设计用来描述网页上的内容，是网页内容的载体；XML被设计用来传输和存储数据，是数据的载体。
XML缺点：XML格式臃肿，和数据无关的代码多，体积大，传输效率低；在javascript中解析XML比较麻烦

JSON
JSON的英文全称是javaScript Object Notation, 即“JavaScript 对象表示法”。JSON就是Javascript对象和数组的字符串表示法，它使用文本表示一个JS对象或数组的信息，因此，JSON的本质是字符串。
作用：JSON是一种轻量级的文本数据交换格式，在作用上类似XML，专门用于存储和传输数据，但是JSON比XML更小，更快，更易解析。

JSON的两种结构

1. 对象结构：对象结构在JSON中用{ }。数据结构为{key: value, key: value, …}的键值对结构。其中，key必须是使用英文的双引号包裹的字符串。

[ "java", "python", "c" ]
[ 100, 200, 300.5 ]
[ true, false, null ]
[ { "name": "zhangsan", "age": 20}, { "name": "spring", "age": 22} ]

1
2
3
4
5

2. 数组结构：[ ]括起来，数据结构为[“java”, “javascript”, 30,true…]。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

[ "java", "python", "c" ]
[ 100, 200, 300.5 ]
[ true, false, null ]
[ { "name": "zhangsan", "age": 20}, { "name": "spring", "age": 22} ]

1
2
3
4
5

JSON 的作用：在计算机与网络之间存储和传输数据。
JSON 的本质：用字符串来表示 Javascript 对象数据或数组数据

3 客户催单

用户在小程序中点击催单按钮后，需要第一时间通知外卖商家。通知的形式有如下两种：

• 语音播报
• 弹出提示框

3.1 设计思路：

具体过程同2.1。

3.2 代码开发

Controller层
根据用户催单的接口定义，在user/OrderController中创建催单方法：

public Result reminder(Long id){
	orderService.reminder(id);
	return Result.success();
}
1
2
3
4

Service层实现类
在orderServicelmpl中实现reminder方法：

public void reminder(Long id){
	//查询订单是否存在
	Order orders = orderMapper.getById(id);
	if (orders == null){
		throw new OrderBusinessException(MessageContant.ORDER_NOT_FOUND);
}
//基于WebSocket实现催单
Map map = new HashMap();
map.put("type", 2);
map.put("orderId",id);
map.put("content","订单号："+ orders.getNumber());
webSocketServer.sendToAllClient(JSON.toJSONString(map));
}
1
2
3
4
5
6
7
8
9
10
11
12
13

Mapper层
在orderMapper中添加getById：

//根据用户id查询订单
Orders getById(Long id);

1
2
3