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推送功能去实现一个简单的聊天系统,关注看后续。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/10546.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

王麻子1651商标被王麻子跨类无效宣告!

近日“王麻子1651”商标被王麻子跨类无效宣告&#xff0c;最后不予注册&#xff0c;普推知产老杨了解“王麻子”是我国著名的老字号&#xff0c;创始于1651年&#xff0c;以刀剪闻名于世&#xff0c;刀剪的商标分类主要是在8类手工器械&#xff0c;而被无效宣告的商标在16类办公…

手机电脑通用便签推荐 好用便签下载

便签软件作为一种日常记录和管理工具&#xff0c;其实用性和便捷性深受用户喜爱。一款优秀的便签软件不仅能帮助我们随时随地记录重要信息&#xff0c;还能有效提高工作效率。然而&#xff0c;市场上很多便签应用仅限于单一平台使用&#xff0c;对于需要在手机和电脑间频繁切换…

如何到《新英格兰医学杂志》 NEJM查找下载文献

《新英格兰医学杂志》NEJM是世界上阅读、引用最广泛、影响力最大的综合性医学期刊之一。NEJM集团出版的期刊还包括NEJM Journal Watch、NEJM Catalyst及NEJM Evidence。NEJM是一份全科医学周刊&#xff0c;出版对生物医学科学与临床实践具有重要意义的一系列主题方面的医学研究…

json-server 模拟接口服务

前端开发经常需要模拟接口请求&#xff0c;可以通过 json-server 实现。 1. 安装 json-server 在前端项目的终端命令行中执行 npm i json-server2. 创建数据源 在项目中新建文件 db.json &#xff0c;与 package.json 同级&#xff0c;内容为模拟的数据 注意 json 文件对格式…

选择步入式高低温试验室价格除外还需要考虑哪些方面?

选择步入式高低温试验室时&#xff0c;价格是一个非常重要的考虑因素。但是&#xff0c;步入式高低温试验室价格不仅仅是主要决定因素&#xff0c;我们还需要考虑到设备的性能、质量、可靠性以及售后服务等多方面因素。接下来给大家具体介绍的关于选择步入式高低温试验室价格除…

conan2 基础入门(06)-conanfile.py入门

conan2 基础入门(06)-conanfile.py入门 文章目录 conan2 基础入门(06)-conanfile.py入门⭐准备预备文件和Code ⭐使用流程指令 ⭐具体讲解conanfile.pyconan install END视频教学 ⭐准备 注意&#xff0c;如果想跟好的学习conanfile.py建议使用python来安装conan。 当然使用其…

C++入门系列-构造函数

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 类的6个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何类在什么都不写时&#xff0c;编译器会…

Day 28 MySQL的数据备份与恢复

数据备份及恢复 1.概述 ​ 所有备份数据都应放在非数据库本地&#xff0c;而且建议有多份副本 备份&#xff1a; 能够防止由于机械故障以及人为误操作带来的数据丢失&#xff0c;例如将数据库文件保存在了其它地方 冗余&#xff1a; 数据有多份冗余&#xff0c;但不等备份&…

JVM---垃圾回收

目录 一、C/C的内存管理 二、Java的内存管理 三、垃圾回收的对比 四、Java的内存管理和自动垃圾回收 五、方法区的回收 手动触发回收 六、堆回收 如何判断堆上的对象可以回收&#xff1f; 引用计数法 可达性分析算法 五种对象引用 软引用 软引用的使用场景-缓存 弱引用 虚…

机柜风扇KTS011温湿度控制器KTO011风机控制温控器机械开关温控仪

品牌&#xff1a;威驰 型号&#xff1a;KTS011常开 产地&#xff1a;中国大陆 颜色分类&#xff1a;KTS011常开,KTO011常闭 KTS011与KTO011的区别 KTS011&#xff0c;常开型&#xff0c;可搭配风扇/风机使用&#xff1a;当环境温度超过温控器设定温度&#xff0c;温控…

数据结构与算法===贪心算法

文章目录 定义适用场景柠檬水找零3.代码 小结 定义 还是先看下定义吧&#xff0c;如下&#xff1a; 贪心算法是一种在每一步选择中都采取在当前状态下最好或最优&#xff08;即最有利&#xff09;的选择&#xff0c;从而希望导致结果是全局最好或最优的算法。 适用场景 由于…

Kafka的安装及接入SpringBoot

环境&#xff1a;windows、jdk1.8、springboot2 Apache KafkaApache Kafka: A Distributed Streaming Platform.https://kafka.apache.org/ 1.概述 Kafka 是一种高性能、分布式的消息队列系统&#xff0c;最初由 LinkedIn 公司开发&#xff0c;并于2011年成为 Apache 顶级项目…

C语言-课程管理系统-大作业

C语言编写课程管理系统 1 需求分析2 需要查的知识点3 数据结构和基础函数功能3.1 课程数据结构3.2 菜单和选择项3.3 从文件中加载课程信息到内存3.4 将内存中的课程信息保存到文件3.5 将输入的字符串格式化为课程信息结构体 4 主要功能函数4.1 录入课程信息函数4.2 浏览课程信息…

2024全新小狐狸AI免授权源码

源码安装说明&#xff1a; 下 载 地 址 &#xff1a; runruncode.com/php/19757.html 1. 在宝塔新建一个站点&#xff0c;选择 PHP 版本为 7.2、7.3 或 7.4。将压缩包上传到站点的根目录&#xff0c;并设置运行目录为 /public。 2. 导入数据库文件&#xff0c;该文件位于 …

Python装饰器带括号和不带括号的理解

装饰器是 Python 中一个强大且灵活的特性&#xff0c;允许用户在不修改原有函数或类定义的基础上&#xff0c;为其增加额外功能。 今天在尝试自定义 Python 装饰器的时候遇到了一个问题&#xff0c;因为以前一直是使用装饰器&#xff0c;基本没有自定义过装饰器&#xff0c;所…

vue3点击添加小狗图片,vue3拆分脚本

我悄悄蒙上你的眼睛 模板和样式 <template><div class"XueXi_Hooks"><img v-for"(dog, index) in dog1List" :src"dog" :key"index" /><button click"addDog1">点我添加狗1</button><hr …

WPF之工具栏菜单栏功能区。

1&#xff0c;菜单栏&#xff0c;工具栏&#xff0c;状态栏。 1.1&#xff0c;Menu中可添加菜单分隔条<Separator></Separator>作为分割线&#xff0c;使用Separator可以通过改变其template来自定义&#xff0c;Separator是无焦点的&#xff0c;如果简单的在MenuIt…

品鉴中的平衡之美:如何欣赏红酒的口感与风格和谐

品鉴云仓酒庄雷盛红酒的过程&#xff0c;是对其口感与风格和谐的追求和欣赏。平衡是红酒品质的重要标志之一&#xff0c;它体现在红酒的色泽、香气、口感和余味等多个方面。通过欣赏红酒的平衡之美&#xff0c;我们可以更好地领略其精妙之处&#xff0c;感受其带来的美妙滋味。…

【Unity Animation 2D】Unity Animation 2D骨骼绑定与动画制作

一、图片格式为png格式&#xff0c;并且角色各部分分离 图片参数设置 需要将Sprite Mode设置为Single&#xff0c;否则图片不能作为一个整体 1、创建骨骼 1.1 旋转Create Bone&#xff0c;点击鼠标左键确定骨骼位置&#xff0c;移动鼠标再次点击鼠标左键确定骨骼&#xff0c…

大数据面试题第一期*4

题1、HDFS存储机制 &#xff08;1&#xff09;客户端向namenode请求上传文件 &#xff0c;namenode检查目标文件是否已存在 &#xff0c;父目录是否存在。 &#xff08;2&#xff09;namenode返回是否可以上传。 &#xff08;3&#xff09;客户端请求第一个 block上传到哪几个d…