当前位置： 首页 > news >正文

[苍穹外卖]-10WebSocket入门与实战

news 文章来源：https://blog.csdn.net/CSDN20221005/article/details/142199835 2025/4/27 15:45:01

WebSocket

WebSocket是基于TCP的一种新的网络协议, 实现了浏览器与服务器的全双工通信, 即一次握手,建立持久连接,双向数据传输

区别

  1. HTTP是短连接, WebSocket是长连接
  2. HTTP单向通信, 基于请求响应模型
  3. WebSocket支持双向通信

相同

  1. HTTP和WebSocket底层都是TCP连接

应用场景: 视频弹幕/网页聊天/体育实况更新/股票基金报价实时更新

入门案例

使用webcocket.html页面作为客户端, 双击打开即用

<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8"><title>WebSocket Demo</title>
</head>
<body><input id="text" type="text" /><button onclick="send()">发送消息</button><button onclick="closeWebSocket()">关闭连接</button><div id="message"></div>
</body>
<script type="text/javascript">var websocket = null;var clientId = Math.random().toString(36).substr(2);//判断当前浏览器是否支持WebSocketif('WebSocket' in window){//连接WebSocket节点websocket = new WebSocket("ws://localhost:8080/ws/"+clientId);}else{alert('Not support websocket')}//连接发生错误的回调方法websocket.onerror = function(){setMessageInnerHTML("error");};//连接成功建立的回调方法websocket.onopen = function(){setMessageInnerHTML("连接成功");}//接收到消息的回调方法websocket.onmessage = function(event){setMessageInnerHTML(event.data);}//连接关闭的回调方法websocket.onclose = function(){setMessageInnerHTML("close");}//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。window.onbeforeunload = function(){websocket.close();}//将消息显示在网页上function setMessageInnerHTML(innerHTML){document.getElementById('message').innerHTML += innerHTML + '<br/>';}//发送消息function send(){var message = document.getElementById('text').value;websocket.send(message);}//关闭连接function closeWebSocket() {websocket.close();}
</script>
</html>
  1. 大部分浏览器都支持websocket, 通过new WebSocket就可以创建WebScoket对象

导入Maven坐标

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

创建WebSocket服务类, 用于处理客户端的通信, 类似于Controller

/** * WebSocket服务*/
@Component
@ServerEndpoint("/ws/{sid}")
public class WebSocketServer {//存放会话对象private static Map<String, Session> sessionMap = new HashMap();/*** 连接建立成功调用的方法*/@OnOpenpublic void onOpen(Session session, @PathParam("sid") String sid) {System.out.println("客户端：" + sid + "建立连接");sessionMap.put(sid, session);}/*** 收到客户端消息后调用的方法** @param message 客户端发送过来的消息*/@OnMessagepublic void onMessage(String message, @PathParam("sid") String sid) {System.out.println("收到来自客户端：" + sid + "的信息:" + message);}/*** 连接关闭调用的方法** @param sid*/@OnClosepublic void onClose(@PathParam("sid") String sid) {System.out.println("连接断开:" + sid);sessionMap.remove(sid);}/*** 群发** @param message*/public void sendToAllClient(String message) {Collection<Session> sessions = sessionMap.values();for (Session session : sessions) {try {//服务器向客户端发送消息session.getBasicRemote().sendText(message);} catch (Exception e) {e.printStackTrace();}}}}

配置类: 用于创建WebSocket的服务对象, 并交给IOC容器管理

/**
* WebSocket配置类，用于注册WebSocket的Bean*/
@Configuration // 声明配置类
public class WebSocketConfiguration {@Bean //程序运行时,创建WebSocket的服务对象,把对象交给IOC容器管理public ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}}

使用WebSocket服务, 完成浏览器/服务器的双向通信

@Component
public class WebSocketTask {@Autowiredprivate WebSocketServer webSocketServer;/*** 通过WebSocket每隔5秒向客户端发送消息*/@Scheduled(cron = "0/5 * * * * ?")public void sendMessageToClient() {webSocketServer.sendToAllClient("这是来自服务端的消息：" + DateTimeFormatter.ofPattern("HH:mm:ss").format(LocalDateTime.now()));}
}

功能测试: 启动前端页面, 建立WebSocket连接, 服务端通过定时任务类定时给前端推送消息, 前端也可以给服务端发送消息

来单提醒

需求分析: 用户下单并且支付成功后, 需要在第一时间通知外卖商家, 通知的形式是 语音提醒 + 弹出提示框

思路分析

  1. 通过WebSocket实现管理端页面和服务端的长连接
  2. 当客户支付后, 调用WebSocket的相关API实现服务端向客户端推送消息
  3. 客户端浏览器解析服务端推送的消息, 判断是来单提醒还是客户催单, 进行相应的消息提示和语音播报
  4. 约定服务端发送给管理端页面的数据格式为JSON格式
  • type: 消息类型, 1是来单提醒, 2是客户催单
  • orderId: 订单id
  • content: 消息内容

代码开发: 基于WebSocket入门案例改造代码

@Service
@Slf4j
public class OrderServiceImpl implements OrderService {@Autowiredprivate WebSocketServer webSocketServer;/*** 支付成功，修改订单状态** @param outTradeNo*/public void paySuccess(String outTradeNo) {// 根据订单号查询订单Orders ordersDB = orderMapper.getByNumber(outTradeNo);// 根据订单id更新订单的状态、支付方式、支付状态、结账时间Orders orders = Orders.builder().id(ordersDB.getId()).status(Orders.TO_BE_CONFIRMED).payStatus(Orders.PAID).checkoutTime(LocalDateTime.now()).build();orderMapper.update(orders);// 通过webscoket向客户端浏览器推送消息Map map = new HashMap();map.put("type", 1); // 1:来单提醒, 2:客户催单map.put("orderId", ordersDB.getId());map.put("content", "订单号:" + outTradeNo);String json = JSON.toJSONString(map);webSocketServer.sendToAllClient(json);}
}

功能测试: 客户端下单并支付成功后, 商家管理端进行语音播报并弹出提示框

交互说明: 客户端的websocket请求也是经过nginx服务器进行的代理转发

客户催单

需求分析: 用户在小程序中点击催单按钮后, 需要通知外卖商家, 通知形式是语音播报 + 弹出提示框

流程分析

  1. 通过WebSocket实现管理端页面和服务端的长连接
  2. 客户点击催单按钮后, 发起催单请求, 服务端收到请求后, 通过WebSocket, 推送消息给管理端页面
  3. 管理端页面拿到消息后, 进行相应的消息提示和语言播报
  4. 约定服务端发送给管理端页面的数据格式为JSON
  • type: 消息类型, 1: 来单提醒, 2: 客户催单
  • orderId: 订单id
  • content: 消息内容

接口设计

代码实现

@RestController("userOrderController")
@RequestMapping("/user/order")
@Slf4j
@Api(tags = "用户端订单相关接口")
public class OrderController {@Autowiredprivate OrderService orderService;/*** 客户催单*/@GetMapping("/reminder/{id}")@ApiOperation("客户催单")public Result reminder(@PathVariable Long id) {log.info("订单id:{}", id);orderService.reminder(id);return Result.success();}
}

public interface OrderService {/*** 客户催单* @param id*/void reminder(Long id);
}

@Service
@Slf4j
public class OrderServiceImpl implements OrderService {@Autowiredprivate OrderMapper orderMapper;@Autowiredprivate WebSocketServer webSocketServer;/*** 客户催单** @param id*/public void reminder(Long id) {// 根据id查询订单Orders ordersDB = orderMapper.getById(id);// 校验订单是否存在if (ordersDB == null) {throw new OrderBusinessException(MessageConstant.ORDER_STATUS_ERROR);}Map map = new HashMap();map.put("type", 2); // 1表示来单提醒, 2表示客户催单map.put("orderId", id);map.put("content", "订单号:" + ordersDB.getNumber());webSocketServer.sendToAllClient(JSON.toJSONString(map));}
}

功能测试: 用户点击催单按钮, 商家管理端播放语音提示, 并弹出消息框

相关文章：

[苍穹外卖]-10WebSocket入门与实战

WebSocket WebSocket是基于TCP的一种新的网络协议, 实现了浏览器与服务器的全双工通信, 即一次握手,建立持久连接,双向数据传输 区别 HTTP是短连接, WebSocket是长连接HTTP单向通信, 基于请求响应模型WebSocket支持双向通信 相同 HTTP和WebSocket底层都是TCP连接 应用场景…...

编程日记 2024/9/14 11:45:48

【JAVA】一篇聊透百万级数据导入导出场景问题、大数据处理策略及优化方案、EasyExcel 和 EasyPOI的玩法详解

文章目录 名词介绍场景问题分析解决导入问题解决方案内存溢出&#xff08;分批导入&#xff09;DB插入&#xff08;分批插入&#xff09; 导出问题解决方案 导入导出的策略定时导入导出实时导入导出 EasyPOI 更多相关内容可查看 玩之前先了解几个关键名词&#xff08;大佬可省略…...

编程日记 2024/9/14 11:43:46

2024年华为9月4日秋招笔试真题题解

2024年华为0904秋招笔试真题 二叉树消消乐好友推荐系统维修工力扣上类似的题--K站中转内最便宜的航班 二叉树消消乐 题目描述 给定原始二叉树和参照二叉树(输入的二叉树均为满二叉树&#xff0c;二叉树节点的值范围为[1,1000]&#xff0c;二叉树的深度不超过1000)&#xff0c…...

编程日记 2024/9/14 11:42:45

Next.js 14 App Router 预渲染 代码实践 静态页面渲染 SSG 服务端渲染代码 SSR

最近学习了Next.js 14框架&#xff0c;总结一下预渲染技术和具体代码用法&#xff0c;如果有理解不对的地方还请大佬指正。 注意以下内容只讨论App Router的新方案&#xff08;getStaticProps已经弃用&#xff09;。 1.简介 预渲染主要分为2种技术&#xff0c;静态页面渲染(…...

编程日记 2024/9/14 11:40:43

阿里云人工智能ACP错题整理.txt

1、TextRank是一种关键词抽取和文档摘要的排序算法&#xff0c;由谷歌的网页重要性排序算法PageRank算法改进而来&#xff0c;利用文本内部的词语间的语义便可以抽取关键词&#xff0c;它能够从一个给定的文本中抽取出该文本的关键词、关键词组&#xff0c;并使用抽取式的自动文…...

编程日记 2024/9/14 11:39:42

为 WebSocket 配置 Nginx 反向代理来支持 Uvicorn 的最佳实践

前景 要为WebSocket（以 ws:// 或 wss:// 协议）配置 Nginx 反向代理来代理 Uvicorn 服务器（或其他支持 WebSocket 的应用），需要确保 Nginx 和 Uvicorn 支持 WebSocket 连接，并做一些特定的配置。WebSocket 协议与 HTTP/HTTPS 不同，因此需要在 Nginx 中设置正确的代理头和…...

编程日记 2024/9/14 11:38:41

Centos7通过Docker安装openGauss5.0.2并配置用户供Navicat连接使用

下载镜像 [rootiZ2ze3qc9ouxm10ykn3cvdZ ~]# docker pull swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/enmotech/opengauss:5.0.2 5.0.2: Pulling from ddn-k8s/docker.io/enmotech/opengauss 2ec76a50fe7c: Pull complete e48b50219b49: Pull complete 512e203af4…...

编程日记 2024/9/14 11:35:38

生成树详细配置(STP、RSTP、MSTP)

目录 一. 实验内容 STP配置实验 RSTP配置实验 MSTP配置实验 二. 1 ) STP配置实验 实验拓扑 ​编辑 实验配置 实验结果 2 ) RSTP配置实验 实验拓扑 实验配置 实验结果 3 ) MSTP配置实验 实验拓扑 实验配置 ​编辑 实验结果 三 实验总结 一. 实验内容 1) …...

编程日记 2024/9/14 11:33:36

服务器环境搭建-5 Nexus搭建与使用介绍

背景 本文介绍nexus的安装、配置和使用&#xff0c;之后通过案例的方式演示使用过程。 1.下载和安装 本文使用Nexus 3.x版本进行演示 下载地址&#xff1a;Download Nexus Repository OSS | Sonatype 国外网站下载速度较慢&#xff0c;也可以通过百度网盘下载(提取码:9999): …...

编程日记 2024/9/14 11:29:32

将 Parallels Desktop（PD虚拟机）安装在移动硬盘上，有影响吗？

当我们谈论在移动硬盘上安装 Parallels Desktop&#xff08;简称PD虚拟机&#xff09;及其对性能的影响时&#xff0c;特别是在运行如Unigraphics这样的资源密集型软件时&#xff0c;用户需要在便携性与性能之间找到最佳平衡。本文将深入探讨PD虚拟机装在移动硬盘有影响吗&…...

编程日记 2024/9/14 11:28:31

PHP智能化云端培训考试系统小程序源码

智能化云端培训考试系统&#xff1a;重塑学习评估的未来 &#x1f31f; 引言&#xff1a;迈向智能教育的新时代 在这个日新月异的数字时代&#xff0c;教育也在经历着前所未有的变革。智能化云端培训考试系统的出现&#xff0c;正是这一变革的生动体现。它不仅打破了传统教育的…...

编程日记 2024/9/14 11:27:30

内幕！smardaten无代码平台全方位测评，这些细节你绝对想不到！

目录 一、引言二、测评要点2.1、前后端交互嵌套2.2、兼容性与可扩展性2.2.1、页面集成2.2.2、数据集成2.2.3、接口集成2.2.4、权限集成2.2.5、代码扩展支持 2.3、UI定制2.4、开发环境的隔离2.5、OEM定制2.6、多语言切换2.7、AI大模型能力 三、总结 一、引言 作为一枚IT从业者&…...

编程日记 2024/9/14 11:23:26

计算机专业的真正的就业情况

首先听到计算机行业&#xff0c;大多数人岗位已经饱和&#xff0c;前端已死&#xff0c;程序员35岁危机。但是事实上这些认知都是片面的&#xff0c;今天由我来为大家分析计算机行业的内幕。 疫情过后&#xff0c;过内各种行业都受到了冲击&#xff0c;你们敢说除了体制内的行业…...

编程日记 2024/9/14 11:22:25

Java对象列表属性映射工具类

背景 经常有这种情况&#xff0c;就是获取到一个对象列表之后&#xff0c;需要根据对象里某个字段的值去获取另一个字段的值。如下所示&#xff0c;有个Item对象列表&#xff0c;Item对象里有个id字段和Value字段&#xff0c;现需要根据id的值去查询value的值。 // 测试数据Li…...

编程日记 2024/9/14 11:20:23

.net core 通过Sqlsugar生成实体

通过替换字符串的方式生成代码&#xff0c;其他代码也可以通这种方式生成 直接上代码 设置模板 将这几个模板文件设置为&#xff1a;嵌入资源 模板内容&#xff1a; using SqlSugar;namespace {Namespace}.Domain.Admin.{ModelName}; /// <summary> /// {TableDisplay…...

编程日记 2024/9/14 11:19:22

ORCA-3D避障算法解析

二维ORCA原理参考&#xff1a; https://zhuanlan.zhihu.com/p/669426124 ORCA原理图解 1. 找到避障速度增量 u 碰撞处理分为三种情况&#xff1a; &#xff08;1&#xff09;没有发生碰撞&#xff0c;且相对速度落在小圆里 &#xff08;2&#xff09;没有发生碰撞&#xff0…...

编程日记 2024/9/14 11:16:20

CentOS 7停更官方yum源无法使用，更换阿里源

CentOS 7官方源已经停止维护&#xff0c;导致无法使用yum更新软件。通过尝试使用阿里云、清华大学等第三方源解决&#xff0c;现以阿里云第三方源进行配置&#xff1a; 1、备份原有的yum源配置文件 # cp -a /etc/yum.repos.d /etc/yum.repos.d.bak 2、删除原有的yum源配置文…...

编程日记 2024/9/14 11:15:19

Introduction结构

写好论文的**Introduction&#xff08;引言&#xff09;**部分是至关重要的&#xff0c;因为它为读者提供了背景信息&#xff0c;并引导他们进入论文的核心主题。一个优秀的引言应该具备以下几个关键要素&#xff1a; 1. 背景介绍 概述问题&#xff1a;首先&#xff0c;你需要…...

编程日记 2024/9/14 11:14:18

基于SpringBoot实现SpringMvc上传下载功能实现

SpringMvc上传下载功能实现 1.创建新的项目 1&#xff09;项目信息填写 Spring Initializr (单击选中)Name(填写项目名字)Language&#xff08;选择开发语言&#xff09;Type&#xff08;选择工具Maven&#xff09;Group&#xff08;&#xff09;JDK&#xff08;jdk选择17 &…...

编程日记 2024/9/14 11:13:17

vue 控制组件是否显示

在Vue中&#xff0c;控制组件的显示通常使用v-if、v-else-if、v-else或v-show指令。 1.v-if&#xff1a;条件性地渲染元素&#xff0c;如果条件为假&#xff0c;元素甚至不会被渲染到DOM中。 <template><div><MyComponent v-if"showMyComponent" /&…...

编程日记 2024/9/14 11:12:16

生产部门不给力？精益化生产管理咨询公司为您出谋划策

问题背景 近年来&#xff0c;许多企业的生产部门面临着各种挑战和困难。生产效率低下、产品质量不稳定、生产成本过高等问题频频出现&#xff0c;给企业的发展带来了困扰。面对这一现状&#xff0c;许多企业开始寻求专业的管理咨询公司的帮助&#xff0c;以期能够通过精益生产…...

编程日记 2024/9/14 11:11:15

HTML+CSS - 网页布局之网格布局

1. dispaly设置 display是 CSS 中用于设置元素的显示方式的属性。它决定了元素如何被渲染到页面上。不同的display值会改变元素的显示行为&#xff0c;包括布局、排版以及对其他元素的影响。 其中网格容器是最常用的几种方式之一&#xff0c;在文档中创建类似于网格的效果&…...

编程日记 2024/9/14 11:09:13

基于51单片机的16X16点阵显示屏proteus仿真

地址&#xff1a; https://pan.baidu.com/s/1JQ225NSKweqf1Zlad_f1Mw 提取码&#xff1a;1234 仿真图&#xff1a; 芯片/模块的特点&#xff1a; AT89C52/AT89C51简介&#xff1a; AT89C52/AT89C51是一款经典的8位单片机&#xff0c;是意法半导体&#xff08;STMicroelectro…...

编程日记 2024/9/14 11:07:11

【目标检测数据集】厨房常见的水果蔬菜调味料数据集4910张39类VOC+YOLO格式

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;4910 标注数量(xml文件个数)&#xff1a;4910 标注数量(txt文件个数)&#xff1a;4910 标注…...

编程日记 2024/9/14 11:06:10

在Python中统计字符串中每个字符出现的次数

在Python中统计字符串中每个字符出现的次数 在Python编程中，处理字符串是一个常见的任务。统计字符串中每个字符出现的次数不仅能考察候选人的编程能力，还能展示他们对Python内置数据结构和算法的理解。本文将详细介绍如何编写一个函数来统计字符串中每个字符出现的次数，并…...

编程日记 2024/9/14 11:05:09

关于 vue/cli 脚手架实现项目编译运行的源码解析

1.vue项目运行命令解析 在日常开发中&#xff0c;vue 项目通过vue-cli-service脚手架包将项目运行起来&#xff0c;常用的命令例如&#xff1a; npm run serve npm run build 上述执行命令实际一般对应为项目中 package.json 文件的 scripts属性中编写的脚本命令&#xff0c;在…...

编程日记 2024/9/14 11:01:05

C++笔记---继承（上）

1. 继承的简单介绍 1.1 继承的概念 继承(inheritance)机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许我们在保持原有类特性的基础上进行扩展&#xff0c;增加方法(成员函数)和属性(成员变量)&#xff0c;这样产生新的类&#xff0c;称派生类。 继承呈…...

编程日记 2024/9/14 11:00:04

气膜体育馆：为学校打造智能化运动空间—轻空间

随着教育体制的逐步升级&#xff0c;学校在提升学生综合素质方面的需求日益增长&#xff0c;特别是在体育场地方面。气膜体育馆作为一种新型的运动空间形式&#xff0c;正在迅速成为学校体育设施的优选方案。凭借其快速搭建、节能环保等优势&#xff0c;气膜馆在全国各地的校园…...

编程日记 2024/9/14 10:59:03

JVM 调优篇5 jvm性能监控

一 jvm性能监控 1.1 概述 性能诊断是软件工程师在日常工作中需要经常面对和解决的问题&#xff0c;在用户体验至上的今天&#xff0c;解决好应用的性能问题能带来非常大的收益。 体会1&#xff1a;使用数据说明问题&#xff0c;使用知识分析问题&#xff0c;使用工具处理问…...

编程日记 2024/9/14 10:58:02

一. Unity实现虚拟摇杆及屏幕自适应功能

手游里面很多类型的游戏都需要用到遥感功能&#xff0c;例如王者荣耀&#xff0c;和平精英等&#xff0c;之前的摇杆功能都是用类似于Easy Touch的插件进行开发的&#xff0c;今天不借助任何插件来实现虚拟摇杆的功能。 一般虚拟摇杆的组成都是由轮盘和遥感的点组成&#xff0c…...

编程日记 2024/9/14 10:57:01