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

做b2b网站管理系统/比百度强大的搜索引擎

news 文章来源：https://blog.csdn.net/qq_26127905/article/details/139719627 2025/3/19 23:17:09
做b2b网站管理系统,比百度强大的搜索引擎,外贸seo网站建设,晋江企业网站制作文章目录 1. 消息推送常见方式1.1 轮询 VS 长轮询1.2 SSE（server-sent event)服务器发送事件 2. websocket介绍2.1 介绍2.2 原理2.3 websoket API2.3.1 客户端【浏览器】API2.3.2 服务端API 3. 代码实现3.1 流程分析3.2 pom依赖3.3 配置类3.4 消息格式3.5 消息类 4.…

文章目录

  • 1. 消息推送常见方式
    • 1.1 轮询 VS 长轮询
    • 1.2 SSE（server-sent event)服务器发送事件
  • 2. websocket介绍
    • 2.1 介绍
    • 2.2 原理
    • 2.3 websoket API
      • 2.3.1 客户端【浏览器】API
      • 2.3.2 服务端API
  • 3. 代码实现
    • 3.1 流程分析
    • 3.2 pom依赖
    • 3.3 配置类
    • 3.4 消息格式
    • 3.5 消息类
  • 4. 前端代码(非视频源码）

参考视频
【后端&网络&大数据&数据库目录贴】

1. 消息推送常见方式

  • 轮询
  • 长轮询
  • websocket
  • SSE

1.1 轮询 VS 长轮询

在这里插入图片描述

1.2 SSE（server-sent event)服务器发送事件

  • SSE在服务器和客户端之间打开一个单向通道
  • 服务端响应的不再是一次性的数据包，而是text/event-stream类型的数据流信息
  • 服务器有数据变更时将数据流式传输到客户端
    在这里插入图片描述

2. websocket介绍

2.1 介绍

websocket是一种基于TCP链接上进行全双工通信的协议

  • 全双工：允许数据在两个方向上同时传输。（TCP是全双工，HTTP是基于TCP的）
  • 半双工：允许数据在两个方向上传输，但是同一个时间段内只允许一个方向上传输。
    在这里插入图片描述

2.2 原理

在这里插入图片描述

  • ws://localhost?chat 依然是http协议
  • Connection:Upgrade和Upgrade: websocket表明连接升级
  • 响应码 101说明已经切换成功

2.3 websoket API

2.3.1 客户端【浏览器】API

  • websocket对象创建
let ws=new WebSocket(URL);
  • websocket对象相关事件
    在这里插入图片描述
  • websocket对象提供的方法
    在这里插入图片描述

2.3.2 服务端API

在这里插入图片描述

  • 服务端如何接收客户端发送的数据呢?
    在这里插入图片描述
  • 服务端如何推送数据给客户端呢?
    在这里插入图片描述

3. 代码实现

3.1 流程分析

在这里插入图片描述

3.2 pom依赖

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

3.3 配置类

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.4 消息格式

在这里插入图片描述

3.5 消息类

@ServerEndpoint(value = "/chat", configurator = GetHttpSessionConfigurator.class)
@Component
public class ChatEndpoint {public static final Map<String, Session> sessionsMap = new ConcurrentHashMap<>();private HttpSession httpSession;/*** 建立websocket连接后,被调用** @param session*/@OnOpenpublic void onOpen(Session session, EndpointConfig config) {//1.将session进行保存this.httpSession = (HttpSession) config.getUserProperties().get("httpSession");String userName = (String) httpSession.getAttribute("userName");ChatEndpoint.sessionsMap.put(userName, session);//2. 广播消息,需要将登录的所有的用户推送给所有用户String sendMessage = MessageUtil.sendMessage(true, null, userName + "上线");boardcast(sendMessage);}/*** 广播消息*/private void boardcast(String message) {// 遍历 map 集合Set<Map.Entry<String, Session>> entries = ChatEndpoint.sessionsMap.entrySet();for (Map.Entry<String, Session> entry : entries) {Session session = entry.getValue();try {session.getBasicRemote().sendText(message);} catch (IOException e) {// 记录日志}}}@OnMessagepublic void onMessage(String message) {try {String fromName = (String) this.httpSession.getAttribute("userName");// 将消息推送给指定的用户   message : {"toName":"张三","message":"你好"}ClientMessage clientMessage = JSON.parseObject(message, ClientMessage.class);Session session = ChatEndpoint.sessionsMap.get(clientMessage.getToName());String sendMessage = MessageUtil.sendMessage(false, fromName, clientMessage.getMessage());session.getBasicRemote().sendText(sendMessage);} catch (IOException e) {throw new RuntimeException(e);}}/*** 当websocket连接断开时，此方法会被处罚*/@OnClosepublic void onClose(Session session) {
// 从在线用户集合中剔除断开连接的用户String userName = (String) this.httpSession.getAttribute("userName");ChatEndpoint.sessionsMap.remove(userName);// 通知其他用户当前用户下线String sendMessage = MessageUtil.sendMessage(true, null, userName + "上线");boardcast(sendMessage);}
}

4. 前端代码(非视频源码）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery.min.js"></script>
</head>
<body>
<p>【fromUserId】：<div><input id="userId" name="userId" type="text" value="10"></div>
<p>【toUserId】：<div><input id="toUserId" name="toUserId" type="text" value="20"></div>
<p>【发送的消息】：<div><input id="contentText" name="contentText" type="text" value="hello websocket"></div>
<p>【收到的内容】：<div><textarea id="receText"></textarea></div><button id="openSocket">开启socket</button><button id="sendMessage">发送消息</button><button id="closeWs">关闭连接</button>
<script>$(function (){console.log('加兹阿勒')const urlParams = new URLSearchParams(window.location.search);console.log(urlParams)var fromUserId = urlParams.get('fromUserId');$('#userId').val(fromUserId)})var ws ;function openSocket() {if(typeof(WebSocket) == "undefined") {console.log("您的浏览器不支持WebSocket");}else{console.log("您的浏览器支持WebSocket");//实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接//等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");//var socketUrl="${request.contextPath}/im/"+$("#userId").val();var socketUrl="http://localhost:8081/chat";socketUrl=socketUrl.replace("https","wss").replace("http","ws");console.log(socketUrl);if(ws !=null){ws .close();ws =null;}ws = new WebSocket(socketUrl);// 当 WebSocket 成功建立连接时触发ws.onopen  = function(event) {console.log("WebSocket is connected now.");// 在这里你可以发送一些初始消息到服务器// ws.send("Hello, Server!");};// 当接收到来自服务器的消息时触发ws.onmessage = function(event) {console.log("Received data from server: " + event.data);// 处理从服务器接收到的数据var parse = JSON.parse(event.data);$('#receText').val(parse.message);};// 当 WebSocket 连接关闭时触发ws.onclose = function(event) {if (event.wasClean) {console.log("WebSocket connection closed cleanly, code=" + event.code + " reason=" + event.reason);} else {// 例如，服务器进程被终止而关闭console.log("WebSocket connection died");}};// 当 WebSocket 连接出现错误时触发ws.onerror = function(error) {console.error("WebSocket Error: " + error);};}}function sendMessage() {if(typeof(WebSocket) == "undefined") {console.log("您的浏览器不支持WebSocket");}else {console.log("您的浏览器支持WebSocket");console.log('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');ws.send('{"toName":"'+$("#toUserId").val()+'","message":"'+$("#contentText").val()+'"}');}}function closeWs(){ws.close();}$("#openSocket").on('click', openSocket);$("#sendMessage").on('click',sendMessage);$("#closeWs").on('click', closeWs);
</script>
</body>
</html>

相关文章：

【后端】websocket学习笔记

文章目录 1. 消息推送常见方式1.1 轮询 VS 长轮询1.2 SSE&#xff08;server-sent event)服务器发送事件 2. websocket介绍2.1 介绍2.2 原理2.3 websoket API2.3.1 客户端【浏览器】API2.3.2 服务端API 3. 代码实现3.1 流程分析3.2 pom依赖3.3 配置类3.4 消息格式3.5 消息类 4.…...

编程日记 2024/6/20 4:36:44

DataWhale - 吃瓜教程学习笔记（一）

学习视频&#xff1a;第1章-绪论_哔哩哔哩_bilibili 西瓜书对应章节&#xff1a; 第一章 & 第二章 文章目录 机器学习三观What&#xff1a;什么是机器学习&#xff1f;Why: 为什么要学机器学习&#xff1f;1. 机器学习理论研究2. 机器学习系统开发3. 机器学习算法迁移 &…...

编程日记 2024/6/20 4:35:43

Attention Is All You Need论文地址

论文地址 点击即可...

编程日记 2024/6/20 4:33:40

如何优雅的一键下载OpenHarmony活跃分支代码？请关注【itopen: ohos_download】

itopen组织&#xff1a;1、提供OpenHarmony优雅实用的小工具2、手把手适配riscv qemu linux的三方库移植3、未来计划riscv qemu ohos的三方库移植 小程序开发4、一切拥抱开源&#xff0c;拥抱国产化 一、概述 为方便大家每次下载OpenHarmony不同分支/tag代码&#xff0c…...

编程日记 2024/6/20 4:31:37

torch.topk用法

torch.topk用法 介绍使用示例 介绍 官网介绍&#xff1a;https://pytorch.org/docs/stable/generated/torch.topk.html 在指定维度选取k个最大&#xff08;最小&#xff09;的值。 使用示例 values torch.tensor([[2, 1, 3], [1, 2, 3]]) # values # tensor([[2, 1, 3], #…...

编程日记 2024/6/20 4:30:33

终极版本的Typora上传到博客园和csdn

激活插件 下载网址是这个&#xff1a; https://codeload.github.com/obgnail/typora_plugin/zip/refs/tags/1.9.4 解压之后这样的&#xff1a; 解压之后将plugin&#xff0c;复制到自己的安装目录下的resources 点击安装即可&#xff1a; 更改配置文件 "dependencies&q…...

编程日记 2024/6/20 4:29:31

洛谷：P5707【深基2.例12】上学迟到

1. 题目链接 https://www.luogu.com.cn/problem/P5707 【深基2.例12】上学迟到 2. 题目描述 学校和y的家距离s米&#xff0c;s以v的速度去学校&#xff0c;8点之前到&#xff0c;y出门前要打扫10分钟卫生&#xff0c;求s最晚的出门时间 输入&#xff1a;两个正整数路程s&…...

编程日记 2024/6/20 4:28:29

数据治理：数据提取过程中的合规性与安全性

数据治理&#xff1a;数据提取过程中的合规性与安全性 随着数字化时代的到来&#xff0c;数据已经成为企业运营和决策的核心驱动力。然而&#xff0c;在数据提取的过程中&#xff0c;确保数据的合规性和安全性成为了企业面临的重要挑战。数据治理作为一种系统的方法&#xff0…...

编程日记 2024/6/20 4:25:26

24计算机应届生的活路是什么

不够大胆❗ 很多小伙伴在找工作时觉得自己没有竞争力&#xff0c;很没有自信&#xff0c;以至于很害怕找工作面试&#xff0c;被人否定的感觉很不好受。 其实很多工作并没有想象中的高大上&#xff0c;不要害怕&#xff0c;计算机就业的方向是真的广&#xff0c;不要走窄了&…...

编程日记 2024/6/20 4:21:18

HTML页面布局-使用div示例

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body><!--text-align:center 文字水平居中line-height&#xff1a;200px; 文字垂直居中,行高设置跟高…...

编程日记 2024/6/20 4:20:14

怎么把webp文件转换为jpg？快来试试这四种转换方法！

怎么把webp文件转换为jpg&#xff1f;Webp是一种不常见的图片格式&#xff0c;这种格式在使用过程中有很多缺点&#xff0c;首先它的浏览器兼容性不是很强&#xff0c;这就代表大家无法随意进行网络传输&#xff0c;可能需要准备特定的操作才能进行&#xff0c;然后编辑webp的工…...

编程日记 2024/6/20 4:19:12

计算机网络(7) 错误检测

一.校验和 使用补码计算校验和是一种常见的错误检测方法&#xff0c;应用于网络协议如IP和TCP。补码是二进制数的一种表示方法&#xff0c;可以有效地处理符号位和进位。下面是如何利用补码计算校验和的详细步骤和算数例子。 ### 计算步骤 1. **将数据分块**&#xff1a;将数…...

编程日记 2024/6/20 4:18:09

实体类status属性使用枚举类型的步骤

1. 问题引出 当实体类的状态属性为Integer类型时&#xff0c;容易写错 2. 初步修改 把状态属性强制为某个类型&#xff0c;并且自定义一些可供选择的常量。 public class LessonStatus {public static final LessonStatus NOT_LEARNED new LessonStatus(0,"未学习"…...

编程日记 2024/6/20 4:16:05

pytorch基础【4】梯度计算、链式法则、梯度清零

文章目录 梯度计算计算图&#xff08;Computational Graph&#xff09;梯度求导&#xff08;Gradient Computation&#xff09;函数与概念 示例代码更多细节梯度求导的过程梯度求导的基本步骤示例代码注意事项总结 链式法则是什么&#xff1f;链式法则的数学定义链式法则在深度…...

编程日记 2024/6/20 4:15:04

mapreduce综合应用案例 — 招聘数据清洗

MapReduce是一个编程模型和处理大数据集的框架&#xff0c;它由Google开发并广泛使用于分布式计算环境中。MapReduce模型包含两个主要的函数&#xff1a;Map和Reduce。Map函数用于处理输入的键值对生成中间键值对&#xff0c;Reduce函数则用于合并Map函数输出的具有相同键的中间…...

编程日记 2024/6/20 4:14:02

发力采销，京东的“用户关系学”

作者 | 曾响铃 文 | 响铃说 40多岁打扮精致的城市女性&#xff0c;在西藏那曲的偏远农村&#xff0c;坐着藏民的摩托车&#xff0c;行驶在悬崖边的烂泥路上&#xff0c;只因为受顾客的“委托”&#xff0c;要寻找最原生态的藏区某款产品。 30多岁的憨厚中年男性&#xff0c;…...

编程日记 2024/6/20 4:13:00

期望23K，go高级社招面试复盘

面经哥只做互联网社招面试经历分享&#xff0c;关注我&#xff0c;每日推送精选面经&#xff0c;面试前&#xff0c;先找面经哥 我最终还是上岸了&#xff0c;花了一周总结了3万字的go社招高级面试知识体系思维导图&#xff0c;分享出来希望能帮助有缘人吧&#xff0c;以下只是…...

编程日记 2024/6/20 4:10:58

电感（线圈）具有哪些基本特性

首先&#xff0c;电感&#xff08;线圈&#xff09;具有以下基本特性&#xff0c;称之为“电感的感性电抗” ?①直流基本上直接流过。 ?②对于交流&#xff0c;起到类似电阻的作用。 ?③频率越高越难通过。 下面是表示电感的频率和阻抗特性的示意图。 在理想电感器中&#…...

编程日记 2024/6/20 4:09:56

tkinter实现一个GUI界面-快速入手

目录 一个简单界面输出效果其他功能插入进度条文本框内容输入和删除标签内容显示和删除 一个简单界面 含插入文本、文本框、按钮、按钮调用函数 # -*- coding: UTF-8 -*-import tkinter as tk from tkinter import END from tkinter import filedialog from tkinter impor…...

编程日记 2024/6/20 4:08:55

Top10在线音频剪辑软件，你了解几款？（免费分享）

多年来&#xff0c;随着音乐制作人和音频工程师的需求不断增长&#xff0c;音频剪辑软件领域经历了巨大的发展。最新的音频剪辑软件提供了从基本录制到最终发布所需的一切功能。其中一些软件专为播客设计&#xff0c;一些软件是免费的&#xff0c;并且一些软件提供了出色的音效…...

编程日记 2024/6/20 4:07:52

mysql报错：You can‘t specify target table ‘Person‘ for update in FROM clause

背景 在做leetcode里数据库的196题删除重复数据时&#xff0c;我参考评论区大佬的方法先用group by找到每个分组里的最小的id的那条记录&#xff0c;然后删掉原表中id不在其中的记录&#xff0c;然后就报了如题所示的错误。 我的写法如下&#xff1a; DELETE FROMPerson WHER…...

编程日记 2024/6/20 4:06:50

Python sorted()方法

sorted() 是Python中的一个内置函数&#xff0c;用于对可迭代对象进行排序。它返回一个新的已排序的列表&#xff0c;而不会修改原始的可迭代对象。sorted() 函数的基本语法如下&#xff1a; sorted(iterable, keyNone, reverseFalse)参数解释&#xff1a; iterable&#xff…...

编程日记 2024/6/20 4:05:49

云上宝库：三大厂商对象存储安全性及差异性比较

前言 看了几家云厂商的对象存储&#xff0c;使用上有相似也有差异&#xff0c;聊聊阿里云、腾讯云、京东云三家对象存储在使用中存在的风险以及防护措施。 0x01 云存储命名 阿里云对象存储OSS(Object Storage Service)&#xff0c;新用户免费试用三个月&#xff0c;存储包容…...

编程日记 2024/6/20 4:04:48

【计算机网络体系结构】计算机网络体系结构实验-www实验

二、www实验 1. 添加网站 2. 浏览器打开...

编程日记 2024/6/20 4:03:46

Windows下MySQL数据库定期备份SQL文件与删除历史备份文件.bat脚本

目录 一、功能需求 二、解决方案 （1）新建文件夹及批处理文件 （2）编写备份脚本 ①完整脚本 ②参数修改 （3）编写定期删除备份脚本 ①根据文件名识别日期进行删除 ② 根据文件的修改日期删除 （4）设置定时器 （5）常见报错与处理 一、功能需求 在Windows系统下…...

编程日记 2024/6/20 4:02:45

electron基础使用

安装以及运行 当前node版本18&#xff0c;按照官网提供操作&#xff0c;npm init进行初始化操作&#xff0c;将index.js修改为main.js&#xff0c;执行npm install --save-dev electron。&#xff08;这里我挂梯子下载成功了。&#xff09;&#xff0c;添加如下代码至package.…...

编程日记 2024/6/20 4:00:43

9.华为交换机telnet远程管理配置aaa认证

目的&#xff1a;telnet远程管理设备 LSW1配置 [Huawei]int Vlanif 1 [Huawei-Vlanif1]ip add 1.1.1.1 24 [Huawei-Vlanif1]q [Huawei]user-interface vty 0 4 [Huawei-ui-vty0-4]authentication-mode aaa [Huawei-ui-vty0-4]q [Huawei]aaa [Huawei-aaa]local-user admin pass…...

编程日记 2024/6/20 3:56:39

xcode报错合集，你都遇到过哪些跳不过的坑

1.报错Consecutive declarations on a line must be separated by ; 其实我这里是用因为创建了一个结构体&#xff0c;然后在没有使用State的情况下&#xff0c;修改它的属性了 当然加上State依然报错&#xff1a; 应该在UI事件中修改&#xff1a;...

编程日记 2024/6/20 3:55:37

六面体大米装袋机长期稳定运行原因分析

随着现代化农业生产的发展&#xff0c;六面体大米装袋机已成为粮食加工行业不可或缺的重要设备。然而&#xff0c;如何确保这些机器长期稳定运行&#xff0c;提高生产效率&#xff0c;降低维护成本&#xff0c;一直是广大粮食加工企业关注的焦点。星派将为您揭示六面体大米装袋…...

编程日记 2024/6/20 3:53:34

android的surface

相信很多Android开发者都知道Canvas类是UI的画布&#xff08;虽然这种说法并不严谨&#xff09;&#xff0c;因为我们在Canvas上完成各种图形的绘制&#xff0c;那么我们Activity上的各种交互控件又是如何展示并渲染到屏幕上的呢&#xff0c;所以在另一个层面上也有一个“画布”…...

编程日记 2024/6/20 3:52:32