webScoket的浅短的认识

在一般的发送数据请求的时候都是用的http协议,但是对于类似即时聊天,需要客户端与服务器不间断的交互的时候对于http协议来说就不太适用了。因为http协议无法主动把数据发到客户端,而且客户端发送请求之后就会断开连接,无法达到我们的需求。

而相对于webScoket对于客户端与服务器之间的交互就会很好的适用。WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。刚开始的握手需要借助HTTP请求完成,建立连接完成之后就会使客户端与服务器之间进行连接。WebSocket是H5出现的一种新的技术,在之前很多即时通信都是用的轮询技术,通过设定一个间隔时间对服务器进行发送请求,以此更新客户端的内容,但是这样无形中就会增加服务器的压力,同时效率也不是很高。

在 WebSocket API,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中,为我们实现即时服务带来了两大好处:
1. Header
互相沟通的Header是很小的-大概只有 2 Bytes
2. Server Push
服务器的推送,服务器不再被动的接收到浏览器的request之后才返回数据,而是在有新数据时就主动推送给浏览器。
我们可以用nodejs来搭建一个简易的服务器
在搭建服务器中我们需要一个express模块和ws模块,以上是简易服务器的配置。
在第一次握手的时候需要手动进行连接,在这里设置了一个button进行研究
在点击了页面上的button之后就会对js中的函数进行调用,同时,在开始要new一个WebSocket("ws://127.0.0.1:8080"),这个地址是服务器所对应的一个地址,可以根据需要连接别的地址(如果是局域网,需要连接同一局域网中的),也就是说通过new创建WebSocket对象时,需要指定连接地址url,创建成功后对象就会自动进行连接,并根据连接的结果触发相应的事件。
这是在点击建立连接的button之后所调用的函数,在对服务端发送数据的时候,要在这些函数中进行数据处理。

转载于:https://www.cnblogs.com/0828-li/p/5689510.html

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

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

相关文章

xshell报编码问题时可以修改xshell编码

转载于:https://www.cnblogs.com/Mina89/p/5690529.html

前端学习(2023)vue之电商管理系统电商系统之通过路由加载订单列表

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue import Users from ./components/user/Users.vue import Right fr…

访问github很慢问题

文章目录 访问github很慢问题解决重点来了:测试后发现访问,速度飞起实测,香不香,真香!wget下载到一半断了,重连方法我是使用wget去下载elkeidup_image_v1.9.1.tar.gz.00压缩包wget的下载中断重新连接下载指…

GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD)

每一个APP都会用到APP引导页,分量不重但是不可缺少,不论是APP的首次安装还是版本的更新,首先展现给用户眼前的也就只有它了,当然这里讲的不是APP引导页的美化而是APP引导页的高度集成,一行代码搞定APP引导页是不是太夸…

前端学习(2024)vue之电商管理系统电商系统之根据分页获取订单列表数据

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue import Users from ./components/user/Users.vue import Right fr…

前端学习(2025)vue之电商管理系统电商系统之渲染订单列表数据

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue import Users from ./components/user/Users.vue import Right fr…

前端学习(2026)vue之电商管理系统电商系统之实现分页功能

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue import Users from ./components/user/Users.vue import Right fr…

关于单片机串口发送和接收的问题

串口初始化过程: 1、确定T/C1的工作方式--TMOD 2、设置T/C初始值----------------------------TH1、TH2 3、启动T/C-----------------------------------TR1 4、串行口的控制------------------------------SCON 5、串口在中断方式下,需要开CPU和源中断-…

(( excel

(( TYPE() VALUE()

隐隐约约 听 RazorEngine 在 那里 据说 生成代码 很 美。

这只是 一个开始 。。。。 转载于:https://www.cnblogs.com/ganmk--jy/p/5697508.html

前端学习(2027)vue之电商管理系统电商系统之实现省--市联动

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue import Users from ./components/user/Users.vue import Right fr…

前端学习(2028)vue之电商管理系统电商系统之展示物流进度

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue import Users from ./components/user/Users.vue import Right fr…

SQL-Server使用点滴(一-数据对象篇)

前言 SQL的语法比较简单,学起来相比界面UI控制要简单得多,但是SQL在企业级应用中又是如此的重要,以至于很多开发人员都把重点放在SQL上。 SQL并没…

前端学习(2029)vue之电商管理系统电商系统之timeline组件

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue import Users from ./components/user/Users.vue import Right fr…

前端学习(2033)vue之电商管理系统电商系统之通过路由加载报表

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue import Users from ./components/user/Users.vue import Right fr…

军训分批(codevs 2751)

题目描述 Description某学校即将开展军训。共有N个班级。 前M个优秀班级为了保持学习优势,必须和3位任课老师带的班级同一批。 问共有几批? 输入描述 Input DescriptionN,M 老师教的其他班级(M行) 输出描述 Output Description批次…