企业网站设计开发wordpress posts page

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){//当前登录用户IdLong 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));
}

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

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} ]

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} ]

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

3 客户催单

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

• 语音播报
• 弹出提示框

3.1 设计思路：

具体过程同2.1。

3.2 代码开发

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

public Result reminder(Long id){orderService.reminder(id);return Result.success();
}

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));
}

Mapper层
在orderMapper中添加getById：

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