WebSocket前后端建立以及使用
1、什么是WebSocket
WebSocket 是一种在 Web 应用程序中实现双向通信的协议。它提供了一种持久化的连接，允许服务器主动向客户端推送数据，同时也允许客户端向服务器发送数据，实现了实时的双向通信。 这部分直接说你可能听不懂；我举个例子说他的功能（
- 比如我们在网站上通过点击用户，然后出现用户的主页这是http请求，通过我们主动点击然后出现页面
- 然后在网站上有人给我发送了私信消息的时候，我们没有点击任何东西，页面却会跳出提示（xxx发送了一条私信）这是websocket）
下面先说一下为什么会出现WebSocket？
2、WebSocket的由来？
平时我们用java或者go等语言去写一些接口，然后前端调用这些接口就能实现数据获取展示等功能，也就是写出来了一个web页面比如：xx书城。但经过观察就发现这种普通的http接口都是要：当前端点击某个位置的时候，主动的发送http请求去后端接口，才能够拿到数据。也可以理解为http如果想知道服务器是否有内容更新就必须一直发请求到服务端去确认，如果服务器没有更新，那这些通信就都是徒劳的。
所以想要实现http协议能够及时探知服务器上是否有内容更新，以下这些http标准就会成为瓶颈
- 一条连接上只可发送一个请求。
- 请求只能从客户端开始。客户端不可以接收除响应以外的指令。
- 请求 / 响应首部未经压缩就发送。首部信息越多延迟越大。
- 发送冗长的首部。每次互相发送相同的首部造成的浪费较多。
- 可任意选择数据压缩格式。非强制压缩发送。
后来提出了一种Commet的解决方法，即当客户端发送服务端是否有内容更新的查看请求的时候，服务端就先不回应，当服务器端内有内容更新时，再返回该响应。这是一种通过延迟应答，实现服务器端向客户端推送的功能。但是一次连接持续时间边长会消耗更多的资源，同时 http 的瓶颈也没解决。
后来又提出了SPDY的设计，能实现功能但有一些缺点过于明显
最后后来Websocket就出现了。因为不论用什么技术，只要通信使用的是HTTP协议，那就无法彻底解决瓶颈问题。WebSocket网络技术正实为解决这些问题而实现的一套新协议及API。
WebSocket协议
一旦建立了WebSocket协议的通信连接，之后所有的通信都依靠这个专用协议进行，通信过程可以发json、xml、图片等任意格式的数据。
由于是建立在HTTP基础之上的协议，因此连接的发起方仍是客户端，而一旦确立 WebSocket 通信连接，不论服务器还是客户端，任意一方都可直接向对方发送报文。
websocket有推送功能且是长久连接，它的首部信息也小，连接开销以及通信量都减小了很多。
WebSocket连接
接下来就简单实现以下 前端用js，后端用go 语言怎么实现建立websocket连接的，前端和后端使用相同的 URL 来建立 WebSocket 连接是最常见的方式
后端部分
因为想建立连接要先开启服务端做好准备监听，然后等待客户端去发起请求
package mainimport ("fmt""log""net/http""github.com/gorilla/websocket"
)// 创建一个 websocket.Upgrader 对象
var upgrader = websocket.Upgrader{CheckOrigin: func(r *http.Request) bool {// CheckOrigin 函数用于检查请求的来源是否合法,即允许跨域访问return true},
}func websocketHandler(w http.ResponseWriter, r *http.Request) {// 将 HTTP 连接升级为 WebSocket 连接 //request 参数包含了客户端发起连接时提供的 URL 信息ws://localhost:8088/useridconn, err := upgrader.Upgrade(w, r, nil)if err != nil {log.Println("升级为 WebSocket 连接失败:", err)return}// 读取客户端发送的消息for {//阻塞式的操作。当调用这个方法时，如果没有接收到新的消息，它将一直阻塞等待，直到收到新的消息或发生错误。messageType, p, err := conn.ReadMessage()if err != nil {log.Println("读取消息失败:", err)break}// 在控制台打印接收到的消息log.Printf("接收到消息: %s", p)// 构建回复消息response := []byte(fmt.Sprintf("接收到消息: %s", p))// 通过websocket推送，去回复客户端消息，客户端会及时接收到这份信息err = conn.WriteMessage(messageType, response)if err != nil {log.Println("发送消息失败:", err)break}}// 关闭 WebSocket 连接err = conn.Close()if err != nil {log.Println("关闭连接失败:", err)}
}func main() {http.HandleFunc("/ws", websocketHandler)log.Println("WebSocket 服务器运行在 http://localhost:8000/ws")err := http.ListenAndServe(":8088", nil)if err != nil {log.Fatal("启动服务器失败:", err)}
}
前端通过websocket发送给后端的信息就会打印到控制台了
前端部分
前端页面就这样，打开的时候就会自动运行js部分，然后发起连接请求了
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button onclick="onclicked()">发送</button ><script>//与本地计算机通信,注意建立的是websocket连接，所以连接的url开头就是ws了const ws = new WebSocket('ws://localhost:8088/ws')//与其他计算机通信//const ws = new WebSocket('ws://服务器地址:端口号')function onclicked (){ws.send(999);}ws.onopen = function () {console.log('我们连接成功啦...')ws.send(11);}ws.onerror = function () {console.log('连接失败了...')}ws.onmessage = function (e) {console.log('服务端传来数据啦...' + e.data)}ws.onclose = function () {console.log('连接关闭了...')}</script>
</body>
</html>
同样，服务端通过websocket推送到前端的控制台中展示
这就是一个简单的websocket应用，下次我会用websocket推送功能去实现一个简单的聊天系统，关注看后续。
相关文章：
WebSocket前后端建立以及使用
1、什么是WebSocket WebSocket 是一种在 Web 应用程序中实现双向通信的协议。它提供了一种持久化的连接，允许服务器主动向客户端推送数据，同时也允许客户端向服务器发送数据，实现了实时的双向通信。 这部分直接说你可能听不懂；我…...
C++数据结构之链表树图的存储
本文主要介绍用数组存储，结构只做简单介绍 目录 文章目录 前言 结构体实现 1、链表的存储 2、树的存储 3、图的存储 数组实现 1、链表实现 2、树和图的实现 总结 前言 在正常工程中，我们通常使用结构体或者类，来定义并使用如链表…...
又一位互联网大佬转行当网红，能写进简历么？
最近半个月，有两个中年男人仿佛住进了热搜。 一个是刚刚辟谣自己“卡里没有冰冷的 40 亿”的雷军，另一个则是在今年年初就高呼“如果有可能，企业家都要去当网红”的 360 创始人周鸿祎。 他也确实做到了。 先是作为当年 3Q 大战的当事人&…...
 A. Ice Skating （并查集）)
Codeforces Round 134 (Div. 1) A. Ice Skating （并查集）
Ice Skating 题面翻译 Description 给出n个点的横纵坐标，两个点互通当且仅当两个点有相同的横坐标或纵坐标，问最少需要加几个点才能使得所有点都两两互通 Input 第一行一个整数n表示点数，之后n行每行两个整数x[ i ]和y[ i ]表示第i个点的…...
深入了解 Flask Request
文章目录 获取请求数据获取请求信息文件上传总结 Flask 是一个轻量级的 Python Web 框架，其简洁的设计和灵活的扩展性使其成为了许多开发者的首选。在 Flask 中，处理 HTTP 请求是至关重要的，而 Flask 提供了丰富而强大的 request 对象来处理…...
前端测试策略与实践：单元测试、E2E测试与可访问性审计
前端测试策略是确保Web应用程序质量、性能和用户体验的关键组成部分。有效的测试策略通常包括单元测试、端到端（E2E）测试以及可访问性审计等多个层面。以下是关于这三类测试的策略与实践建议： 单元测试 定义与目的： 单元测试是针…...
修改el-checkbox样式
一定要在最外层； //未选中框/deep/ .el-checkbox__inner{border-color: #0862a3;}//选中框/deep/ .el-checkbox__input.is-checked .el-checkbox__inner{background-color: #0862a3;border-color: #0862a3;}//未选中框时右侧文字/deep/ .el-checkbox__label{}//选中…...
UE5缺少SDK，而无法在windows平台打包的解决方法
问题1：UE5缺少SDK，而无法在windows平台打包的解决方法（项目问题，做一下记录，没有参考性） (1)打不开：D:\imageworks-OpenColorIO-Configs-v1.0_r2-8-g0bb079c.tar 解决方案：从23拷贝D…...
4G,5G执法记录仪人脸识别、人脸比对使用说明
4G/5G执法记录仪或4G/5G智能安全帽，做前端人脸识别、人脸比对，采用了上市公司的成熟的人脸识别算法，需要支付LICENSE给算法公司，理论上前端设备支持30K的人脸库（受设备运行内存限制）。 4G/5G执法记录仪侧要…...
掌握SEO优化的关键：提升网站排名的秘籍（如何提高网站seo排名）
你是否曾经在搜索引擎上搜索过一个关键词，然后点击了排在前几位的网站？如果是，那么你已经体会到了SEO（搜索引擎优化）的威力。SEO是一项关键的网络营销策略，它能够让你的网站在搜索引擎中获得更高的排名&…...
大模型微调之 在亚马逊AWS上实战LlaMA案例（九）
大模型微调之 在亚马逊AWS上实战LlaMA案例（九） 代码阅读 src/llama_recipes/inference/prompt_format_utils.py 这段代码是一个Python模块，它定义了几个类和模板，用于生成安全评估的提示文本。以下是对每一行代码的注释和提示词…...
Php php7的特性
1. 性能优化 PHP7引入了Zend Engine 3.0，显著提高了执行效率，相比PHP 5.x，性能提升了2-3倍。这个特性无法直接通过代码示例展示，但你可以感受到在升级到PHP7后，相同代码的执行速度更快。 2. 函数返回类型声明 允许在…...
node pnpm修改默认包的存储路径
pnpm与npm的区别 PNPM和NPM是两个不同的包管理工具。 NPM（Node Package Manager）是Node.js的官方包管理工具，用于安装、发布和管理Node.js模块。NPM将包安装在项目的node_modules目录中，每个包都有自己的依赖树。 PNPM…...
Adobe-Premiere-CEP 扩展 入门-视频剪辑-去气口插件-Silence Remover
短视频，这两年比较火，不要再问为什么用Premiere，非常难用，为什么不用某影，某些国内软件非常接地气简单，又例如某音资深的视频短编辑就很好用了。。。 Premiere二次开发调试难，不如自己搞个cons…...
基于多目标灰狼算法的冷热电联供型微网低碳经济调度
针对冷热电联供型微电网运行调度的优化问题，为实现节能减排的目标，以微电网运行费用和环境污 染成本为优化目标，建立了包含风机、微型燃气轮机、余热锅炉、溴化锂吸收式制冷机等微源的微电网优化 模型。模型的优化求解使用改进的多目标灰狼优化算法，得到多目标问题的 Paret…...
 和 (?＜=...) 符号)
Python 正则表达式 (?=...) 和 (?＜=...) 符号
Python 正则表达式 引言正文示例1示例2示例3示例4 引言 今天遇到了一个比较棘手的问题，于是终于打算要对正则表达式中的 (?...) 和 (?<...) 符号动手了。 正文 (?...) 表示当 … 匹配时，匹配成功，但不消耗字符串中的任何字符。这个…...
Vue.js中使用JavaScript实现路由跳转详解
在Vue应用中，利用Vue Router进行页面间的导航是一个常见需求。本篇博客将通过示例代码详细介绍如何在Vue组件中使用JavaScript实现路由跳转，包括传递参数的两种方式：通过params和query。让我们一步步深入了解。 基础设置 首先，确…...
社群裂变：从微光到星火的社群增长奥秘
在当今社交媒体盛行的时代，社群裂变已成为众多品牌、企业和个人实现快速增长的重要策略。社群裂变不仅能够有效扩大影响力，还能精准触达目标用户，实现高效转化。本文将深入探讨社群裂变的内涵、策略及实施方法，助您揭开社群增长的…...
Git命令Gitee注册idea操作git超详细
文章目录 概述相关概念下载和安装常见命令远程仓库介绍与码云注册创建介绍码云注册远程仓库操作关联拉取推送克隆 在idea中使用git集成add和commit差异化比较&查看提交记录版本回退及撤销与远程仓库关联 push从远程仓库上拉取，克隆项目到本地创建分支切换分支将…...
出差行程到底怎么管？这个“高分指南”划重点来了！
在日常商旅过程中，出差行程计划是必不可少的环节。公司需要以此为依据判断行程是否有必要、是否合理，确保出差行程与公司的业务需求相符。 通过胜意费控云，员工填写出差申请时，行程计划智能生成，平台自动匹配并带出差标…...
手游刚开服就被攻击怎么办？如何防御DDoS？
开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
多模态2025：技术路线“神仙打架”，视频生成冲上云霄
文｜魏琳华 编｜王一粟 一场大会，聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中，汇集了学界、创业公司和大厂等三方的热门选手，关于多模态的集中讨论达到了前所未有的热度。其中，…...
C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为：煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例，提供抽象制作饮品基类，提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...
Appium+python自动化（十六）- ADB命令
简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。 今天是六一儿童节，小蓝老师为了让大家在节…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
HTML前端开发：JavaScript 常用事件详解
作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件 当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...
高防服务器能够抵御哪些网络攻击呢？
高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索（基于物理空间 广播范围）2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...