五分钟学会HTML5的WebSocket协议_html5教程技巧

来源:脚本之家  责任编辑:小易  

php是前台,还需要会js和mvc。asp.net是全称。net是asp的一种,后台会这个就行。而js是做后台和特别效果的,mvc是做框架的www.zgxue.com防采集请勿采集本网。

1、背景

HTML5入门到精通可以分为3个阶段:了解HTML5、熟练掌握HTML5、精通HTML5;HTML5此处指的是HTML、CSS、JavaScript以及HTML5和CSS3(新增的) 首先了解HTML5 需要去了解HTML5是什么,HTML5能够做

很多网站为了实现推送技术,所用的技术都是Ajax轮询。轮询是在特定的的时间间隔由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。HTML5新增的一些新协议WebSocket,可以提供在单个TCP连接上提供全双工,双向通信,能够节省服务器资源和带宽,并且能够实时进行通信。

确切地说,是网站的界面,html就是负责界面的,html5将会是最新html的规范,做网站的界面就叫界面设计,也叫web前端开发,这一点单单学习html5还不够,css3,javascript已经javascript的一些框架(jQuery

2、WebSocket介绍

不需要学,看下新标签的使用方法即可,一个星期完全搞定

传统的http也是一种协议,WebSocket是一种协议,使用http服务器无法实现WebSocket,

现在学习web前端,html5开发还是很火的,缺口大,前景好,简单能学会的,先去网上找点基础视频看 Mars的视频比较好讲得很全面。当然学习要靠自觉性,坚持学习,兴趣是最好的老师。

2.1.浏览器支持情况

这个貌似不是药来的,见效不会那么快的,其实只是找到好的教程或者是去学校找老师一步一步向上学习。努力用心去,如果您没有好的选择,您可以先去看下慕课网吧。

基本主流浏览器都支持

2.2.优点

相对于http有如下好处:

1.客户端与服务器只建立一个TCP连接,可以使用更少的连接。

2.WebSocket服务器端可以主动推送数据到客户端,更灵活高效。

3.更轻量级的协议头,减少数据传送量。

对比轮训机制

3、WebSocket用法

我们了解WebSocket是什么,有哪些优点后,怎么使用呢?

3.1.WebSocket创建

WebSocket使用了自定义协议,url模式与http略有不同,未加密的连接是ws://,加密的连接是wss://,WebSocket实例使用new WebSocket()方法来创建,

var ws = new WebSocket(url, [protocol] );

第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的,指定了可接受的子协议。

3.2.WebSocket属性

当创建ws对象后,readyState为ws实例状态,共4种状态

0 表示连接尚未建立。

1 表示连接已建立,可以进行通信。

2 表示连接正在进行关闭。

3 表示连接已经关闭或者连接不能打开。

Tips:在发送报文之前要判断状态,断开也应该有重连机制。

3.3.WebSocket事件

在创建ws实例对象后,会拥有以下几个事件,根据不同状态可在事件回调写方法。 ws.onopen 连接建立时触发 ws.onmessage 客户端接收服务端数据时触发 ws.onerror 通信发生错误时触发 ws.onclose 连接关闭时触发

ws.onmessage = (res) => { console.log(res.data);};ws.onopen = () => { console.log('OPEN...');};ws.onclose=()=>{ console.log('CLOSE...');}

3.4.WebSocket方法 ws.send() 使用连接发送数据(只能发送纯文本数据) ws.close() 关闭连接

4、Demo演示

了解WebSocket的一些API之后,趁热打铁,做一个小案例跑一下。

4.1.Node服务器端

WebSocket协议与Node一起用非常好,原因有以下两点:

1.WebSocket客户端基于事件编程与Node中自定义事件差不多。

2.WebSocket实现客户端与服务器端长连接,Node基本事件驱动的方式十分适合高并发连接

创建一个webSocket.js如下:

const WebSocketServer = require('ws').Server;const wss = new WebSocketServer({ port: 8080 });wss.on('connection', function (ws) { console.log('client connected'); ws.on('message', function (message) { ws.send('我收到了' + message); });});

打开windows命令窗口运行

4.2.HTML客户端

新建一个index.html页面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>webSocket小Demo</title></head><body> <div class="container"> <div> <input type="text" id="msg"> <button onclick="sendMsg()">发送报文</button> </div> </div> <script> const ws = new WebSocket('ws://localhost:8080'); ws.onmessage = (res) => { console.log(res); }; ws.onopen = () => { console.log('OPEN...'); }; ws.onclose = () => { console.log('CLOSE...'); } function sendMsg() { let msg = document.getElementById('msg').value; ws.send(msg); } </script></body>

打开浏览器依次输入字符1,2,3,每次输入完点击发送报体,可见在ws.onmessage事件中res.data中返回来我们发的报文

5、问题与总结

以上只是简单的介绍了下WebSocket的API与简单用法,在处理高并发,长连接这些需求上,例如聊天室,可能WebSocket的http请求更加合适高效。

但在使用WebSocket过程中发现容易断开连接等问题,所以在每次发送报文前要判断是否断开,当多次发送报文时,由于服务器端返回数据量不同,返回客户端前后顺序也不同,所以需要在客户端收到上一个报文返回数据后再发送下一个报文,为了避免回调嵌套过多,通过Promise ,async ,await等同步方式解决。关于WebSocket就写这么多,如有不足,欢迎多多指正!

其实学什么语言真不好推荐,就我本身而言,因为我在用Python,所以我会推荐Python,而且Python是脚本语言,也适合快速开发,其实也适合做安全的人,我们公司的统一编码语言就是Python。另外就是我文章中说的,看你的方向,你想学好安全,肯定就必须要学一些学习过程中接触到的语言,比如你要学Web前端安全,你如果不会Html,不会JS,你觉得可以吗内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html5 http的轮询和websocket原理
  • 基于html5的websocket的实例代码
  • html5中的websocket实现直播功能
  • html5-websocket实现聊天室示例
  • 浅析html5的websocket与服务器推送事件
  • 带你认识html5中的websocket
  • html5实现websocket协议原理浅析
  • html5的websockets全双工通信详解学习示例
  • 利用html5的websocket实现websocket聊天室
  • 小白学Web安全要先学会HTML5吗?
  • web前端学会html5 css3 还有什么,后端是不是只学一个语言就行了,比如asp php
  • HTML5应该如何学习,对于没有web技术基础的人
  • 用html5开发web应用需要学什么?
  • Html5从入门到精通一般要学习多久
  • html5学会了能做什么?
  • 作为一个web开发人员,学习html5和css3需要多久
  • 如何快速学习html5开发,如何学习html5系统开发,
  • Html5上面的课程容易学会吗?
  • 学会html5可以做什么工作
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5html5websockethtml5 http的轮询和websocket原理基于html5的websocket的实例代码html5-websocket实现聊天室示例浅析html5的websocket与服务器推送事件带你认识html5中的websockethtml5实现websocket协议原理浅析html5的websockets全双工通信详解学习示例利用html5的websocket实现websocket聊天室html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解基于html5+tracking.js实现刷脸支付功能html中meta标签及keywords详解移动端h5页面根据屏幕适配的四种方案html5移动端自适应布局的实现html里显示pdf、word、xls、ppt的方法示例html5 直播疯狂点赞动画实现代码 附源码html5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷canvas 基础之图像处理的使用用canvas显示验证码的实现html5给汉字加拼音收起展开组件的实现代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved