在认识websocket之前,我们必须了解的是websocket有什么用? 他能解决我们遇到的什么问题? 如果没用,那么我们就么有使用它的必要的。

  websocket就是建立起全双工协议的,提高了效率,节省了时间。

 什么是WebSocket? WebSocket一种在单个 TCP连接上进行全双工通讯的协议。即WebSocket是一个协议。 websocket是基于TCP协议的。

  比较通俗的理解,我们可以点击这里

  推荐文章:

   https://zhuanlan.zhihu.com/p/23467317 (强烈推荐 --- 这篇文章详尽介绍了websocket的原理以及长轮询、短轮、commet, 通过铺垫告诉我们为什么要使用 websocket。对于基本概念的理解可以看这一篇文章 )

  http://www.alloyteam.com/2015/04/qian-duan-qiang-hou-duan-fan-wan-node-js-socket-io-zhi-zuo-jian-yi-liao-tian-shi/ (推荐: 这篇文章是腾讯前端团队的成员所写,只是其中的例子都已经不能用了,但是这篇文章的思路还是非常清晰的,并且分享了自己在做项目中遇到的一些坑。)

  http://www.cnblogs.com/Wayou/p/hichat_built_with_nodejs_socket.html (这是讲解文章,非常好。可以参考学习。)

  https://github.com/wayou/HiChat/blob/master/www/scripts/hichat.js (这是是github的源代码)

  https://hichat.herokuapp.com/ (这个网站是聊天室在PC端的具体实现 。)

   https://www.websocket.org/index.html#  websocket官网

  https://socket.io/demos/chat/ (socket.io提供了聊天室demo) 相关https://socket.io/get-started/chat/教程: 

第一部分:WebSocket的特点

  • 通过TCP一次握手就可以建立连接。  而HTTP协议需要三次握手。
  • HTTP中服务器永远是被动的,即每次只有客户端发出请求,服务器才会响应。 但是WebSocket协议中,服务器是可以主动的向客户端传递数据。这样就避免了轮询的问题。
  • WebSocket需要浏览器、服务器同时支持才可以使用,而http协议是普遍支持的。 且WebSocket是一种新的协议,只是目前为了兼容性,必须要建立在http的基础上发起请求,如只用WebSocket协议名将不再是http:而是ws:。
  • 同样地,WebSocket也是基于TCP协议的。

websocket 和 http 的区别

  首先要知道的时 websocket 和 http是不同的两个协议,最大的区别在于---http协议是被动的,而websocket协议是主动的。 所谓被动就是说只有客户端发起请求服务器端才会给出响应,而websocket显然就是说可以由服务器端来主动给数据,也许你并没有请求。

  

客户端:啦啦啦,我要建立Websocket协议,需要的服务:chat,Websocket协议版本:17(HTTP Request)
服务端:ok,确认,已升级为Websocket协议(HTTP Protocols Switched)
客户端:麻烦你有信息的时候推送给我噢。。
服务端:ok,有的时候会告诉你的。
服务端:balabalabalabala
服务端:balabalabalabala
服务端:哈哈哈哈哈啊哈哈哈哈
服务端:笑死我了哈哈哈哈哈哈哈

作者:Ovear
链接:https://www.zhihu.com/question/20215561/answer/40316953
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 
 
  这样, 服务器端就可以在有消息的时候再推送消息,那么客户端就可以减少不必要的ajax轮询了。

注意: 虽然websocket和http协议是两个不同的协议,但是我们每次在使用websocket协议时,首先要建立http协议,通过http协议,我们才能进一步升级(upgrade)为websocket协议。

下面这张图片比较好地解释了websocket的相关原理。

相比于传统 HTTP 的每次“请求-应答”都要 client 与 server 建立连接的模式,WebSocket 是一种长连接的模式。具体什么意思呢?就是一旦 WebSocket 连接建立后,除非 client 或者 server 中有一端主动断开连接,否则每次数据传输之前都不需要 HTTP 那样请求数据。从上面的图可以看出,client 第一次需要与 server 建立连接,当 server 确认连接之后,两者便一直处于连接状态。直到一方断开连接,WebSocket 连接才断开。

第二部分: 基础知识

  当我们获取了WebSocket连接之后,我们就可以通过send()方法来向服务器发送数据,并通过onmessage事件来接收服务器返回的数据。下面的api用于创建一个Websocket对象。

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

  其中第一个参数是需要连接的url,后一个参数是可选的,制定可以接受的子协议。

 

WebSocket相关属性

  即我们创建了Socket对象之后,它会有一个readyState属性(这个和xhr的属性同名),取值如下:

0     表示连接尚未建立

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

2     表示连接正在进行关闭

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

且websocket链接一旦建立,那么就可以双方进行通信了,直到有一方主动提出终止链接为止。,

WebSocket方法

  WebSocket中只有两个方法,一个是使用连接发送数据,即Socket.send(),另一个就是关闭连接,即Socket.close()。

  注意:在xhr中是没有close相关方法的,因为一次请求一次响应的方式使得其无需close。

WebSocket 事件

  

第三部分:WebSocket实例

  在建立一个WebSocket连接的时候,客户端浏览器首先向服务器发送一个http请求,这个请求和普通的http请求不同,因为在首部字段中包含了Upgrade: WebSocket; 这表明这是一个申请升级为WebSocket协议的http请求, 服务器解析这些附加的头信息然后产生了应答信息返回给客户端,客户端和服务端的WebSocket连接就建立起来了,双方就可以使用这个连接进行自由的传递信息,并且这个连接会持续存在到客户端或者服务器端的某一方主动的关闭连接。

  

客户端的HTML和JavaScript

  下面是菜鸟教程上的例子:

 

  但是如果要使用,我们必须安装 pywebsocket, 安装过程如下:

https://looly.gitbooks.io/python-basic/100/101.html 这里有python环境的安装教程。

http://www.runoob.com/html/html5-websocket.html 这里是pywebsocket的安装过程。

  

第四部分: http与websocket在报文方面的差异

  这里从报文层面谈一下两者的差异。

  首先,client 发起 WebSocket 连接,报文类似于 HTTP,但主要有几点不一样的地方:

  

  • "Upgrade: websocket": 表明这是一个 WebSocket 类型请求,意在告诉 server 需要将通信协议切换到 WebSocket

  • "Sec-WebSocket-Key*": 是 client 发送的一个 base64 编码的密文,要求 server 必须返回一个对应加密的 "Sec-WebSocket-Accept" 应答,否则 client 会抛出 "Error during WebSocket handshake" 错误,并关闭连接

  server 收到报文后,如果支持 WebSocket 协议,那么就会将自己的通信协议切换到 WebSocket,返回以下信息:

  

  • "HTTP/1.1 101 WebSocket Protocol Handshake":返回的状态码为 101,表示同意 client 的协议转换请求

  • "Upgrade: websocket"

  • "Connection: Upgrade"

  • "Sec-WebSocket-Accept: *"

  • ...

以上都是利用 HTTP 协议完成的。这样,经过“请求-相应”的过程, server 与 client 的 WebSocket 连接握手成功,后续便可以进行 TCP 通讯了,也就没有 HTTP 什么事了。可以查阅WebSocket 协议栈了解 WebSocket 的 client 与 server 更详细的交互数据格式。

第五部分: websocket 与 socket的区别

  什么是socket?

  网络应用中,两个应用程序同时需要向对方发送消息的能力(即全双工通信),所利用到的技术就是 socket,其能够提供端对端的通信。对于程序员而言,其需要在 A 端创建一个 socket 实例,并为这个实例提供其所要连接的 B 端的 IP 地址和端口号,而在 B 端创建另一个 socket 实例,并且绑定本地端口号来进行监听。当 A 和 B 建立连接后,双方就建立了一个端对端的 TCP 连接,从而可以进行双向通信。

  进一步解释: 可以知道socket并不是仅仅针对于网络的,而是对于任何的双方之间可以进行全双工通信,我们就认为这是socket。 而不是说必须是客户端和服务器端。

  

  WebSocekt 是 HTML5 规范中的一部分,其借鉴了 socket 的思想,为 client 和 server 之间提供了类似的双向通信机制。同时,WebSocket 又是一种新的应用层协议,包含一套标准的 API;而 socket 并不是一个协议,而是一组接口,其主要方便大家直接使用更底层的协议(比如 TCP 或 UDP)。

  即 websocket是协议,而socket是技术。

第五部分: websocket与socket.io的区别

  

https://socket.io/ 

Socket.IO 是一个封装了 Websocket、基于 Node 的 JavaScript 框架,包含 client 的 JavaScript 和 server 的 Node其屏蔽了所有底层细节,让顶层调用非常简单

另外,Socket.IO 还有一个非常重要的好处。其不仅支持 WebSocket,还支持许多种轮询机制以及其他实时通信方式,并封装了通用的接口。这些方式包含 Adobe Flash Socket、Ajax 长轮询、Ajax multipart streaming 、持久 Iframe、JSONP 轮询等。换句话说,当 Socket.IO 检测到当前环境不支持 WebSocket 时,能够自动地选择最佳的方式来实现网络的实时通信。e

也就是说,通过socket.io,我们可以更方便的调用websocket。 比如,对于ajax的封装就会大大提高我们的效率,而不需要自己创建,考虑兼容性问题等。

 

不难理解,socket.io这个库是结合了node更方便我们调用socket的方法的库,更狭隘的说,socket.io是一个websocket库, 他和express不同,因为express是node的库,所以两者是相互独立的,为了开发的高效性,我们也可以同时使用express和socket.io两个库。

  

  

 

https://www.zhihu.com/question/20215561

HTML5之WebSocket(转自知乎)的更多相关文章

  1. 认识HTML5的WebSocket

    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...

  2. HTML5之WebSocket

    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...

  3. HTML5 的WebSocket

    认识HTML5的WebSocket

  4. 使用Html5下WebSocket搭建简易聊天室

    一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...

  5. HTML5的Websocket(理论篇 I)

    HTML5的Websocket(理论篇 I) ** 先请来TA的邻居:** http:无状态.基于tcp请求/响应模式的应用层协议 (A:哎呀,上次你请我吃饭了么? B:我想想, 上次请你吃了么) t ...

  6. 如何使用HTML5的WebSocket实现网页与服务器的双工通信(二)

    本系列服务端双工通信包括两种实现方式:一.使用Socket构建:二.使用WCF构建.本文为使用WCF构建服务端的双工通信,客户端同样使用Html5的WebSocket技术进行调用. 一.创建WCF服务 ...

  7. 如何使用HTML5的WebSocket实现网页与服务器的双工通信(一)

    本系列服务端双工通信包括两种实现方式:一.使用Socket构建:二.使用WCF构建.本文为使用Socket构建服务端的双工通信,客户端同样使用Html5的WebSocket技术进行调用. 一.网页客户 ...

  8. html5利用websocket完成的推送功能(tomcat)

    html5利用websocket完成的推送功能(tomcat) 利用websocket和java完成的消息推送功能,服务器用的是tomcat7.0.42,一些东西是自己琢磨的,也不知道恰不恰当,不恰当 ...

  9. HTML5 and Websocket

    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...

随机推荐

  1. 754. Reach a Number

    You are standing at position 0 on an infinite number line. There is a goal at position target. On ea ...

  2. LinqToObject和LinqToSql的区别

    抓住五一假期尾巴和小伙伴们一起分享这两者的区别.大家在日常编码的过程当中肯定也注意过或者使用过.但是二者其实存在本质的区别 1.什么是LinqToObject呢? LINQ to Objects指直接 ...

  3. POJ1611基础带权并查集

    题意:       有一个人生病了,和他一个社团或者间接和他有联系的人都会生病,问一共有多少人生病了. 思路:       比较简单和基础的题,带权并查集中的一种,就是记录更新集合元素个数,这个题目我 ...

  4. Win64 驱动内核编程-11.回调监控进线程句柄操作

    无HOOK监控进线程句柄操作 在 NT5 平台下,要监控进线程句柄的操作. 通常要挂钩三个API:NtOpenProcess.NtOpenThread.NtDuplicateObject.但是在 VI ...

  5. [CTF]思维导向图

    [CTF]思维导向图 ---------------来自大佬的CTF思维导向图 Angel_Kitty https://www.cnblogs.com/ECJTUACM-873284962/ 给信息安 ...

  6. Swift系列三 - 函数

    函数在任何语言中都是存在的,Swift中函数更加灵活. 一.函数的定义 1.1. 有返回值(形参默认是let,也只能是let) func pi() -> Double { return 3.14 ...

  7. PHP基础-数组

    一.数组的概述 * 1. 数组的本质:管理和操作一组变量,成批处理 * 2. 数组是复合类型 * 3. 数组中可以存储任意长度的数据,也可以存储任意类型的数据 * 4. 数组就可以完成其它语言数据结构 ...

  8. Identity Server4 数据迁移、持久化

    add-migration InitialPersistedGrantDb -c PersistedGrantDbContext -o Migrations/IdentityServer/Persis ...

  9. Vue.js源码解析-从scripts脚本看vue构建

    目录 1. scripts 脚本构建 1.1 dev 开发环境构建过程 1.1.1 配置文件代码 1.1.2 如何进行代码调试? 1.2 build 生产环境构建过程 1.2.1 scripts/bu ...

  10. apache common pool2原理与实战

    完整源码,请帮我点个star哦! 原文地址为https://www.cnblogs.com/haixiang/p/14783955.html,转载请注明出处! 简介 对象池顾名思义就是存放对象的池,与 ...