HTML5之WebSocket

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

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

第一部分:WebSocket的特点

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

第二部分: 基础知识

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

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

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

 

WebSocket相关属性

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

0     表示连接尚未建立

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

2     表示连接正在进行关闭

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

WebSocket方法

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

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

WebSocket 事件

  

第三部分:WebSocket实例

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

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

时间: 2024-10-06 02:29:52

HTML5之WebSocket的相关文章

认识HTML5的WebSocket

认识HTML5的WebSocket 在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法,从客户端使用简单的语法有效地推动消息到服务器.让我们看一看HTML5的WebSocket API:它可用于客户端.服务器端.而且有一个优秀的第三方API,名为Socket.IO. 一.什么是WebSocket API? WebSocket API是下一代客户端-

HTML5 and Websocket

在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法,从客户端使用简单的语法有效地推动消息到服务器.让我们看一看HTML5的WebSocket API:它可用于客户端.服务器端.而且有一个优秀的第三方API,名为Socket.IO. 一.什么是WebSocket API? WebSocket API是下一代客户端-服务器的异步通信方法.该通信取代了单

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

一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站为了实现即时通讯(real-time),所用的技术都是轮询(polling).轮询是在特定的的时间间隔(time interval)(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客服端的浏览器.这种传统的HTTP request d的模式带来很明显的缺点 –

JavaEE & HTML5之WebSocket

1.工作流程 (1)Java服务器创建WebSocket实例,并在Tomcat容器中维护和等待. (2)浏览器中创建客户端WebSocket实例,这时,就会和服务器进行连接,如果连接成功,服务器触发onOpen事件,客户端触发onopen事件. (3)浏览器中WebSocket实例发送消息, webSocket.send('*****');. (4)服务器onMessage事件触发,解析消息内容,并进行相应的逻辑操作,返回结果给浏览器 session.getBasicRemote().sendT

学习html5的WebSocket连接

1.什么是WebSocket WebSocket 是一种自然的全双工.双向.单套接字连接.使用WebSocket,你的HTTP 请求变成打开WebSocket 连接(WebSocket 或者WebSocket over TLS(TransportLayer Security,传输层安全性,原称“SSL”))的单一请求,并且重用从客户端到服务器以及服务器到客户端的同一连接.WebSocket 减少了延迟,因为一旦建立起WebSocket 连接,服务器可以在消息可用时发送它们.例如,和轮询不同,We

分析HTML5中WebSocket的原理

目录结构 一.什么是Websocket websocket是html5提出的一个协议规范,参考rfc6455. 不过目前还都是在草案,没有成为标准,毕竟html5还在路上. websocket约定了一个通信的规范,通过一个握手的机制,客户端(浏览器)和服务器(web server)之间能建立一个类似tcp的连接,从而方便c-s之间的通信. 在websocket出现之前,web交互一般是基于http协议的短连接或者长连接. 短连接的过程大概有下面几个步骤: (1)建立tcp连接: (2)浏览器发出

HTML5 中websocket长连接的具体实现方法

HTML5中通过调用与数据通信相关的Web Socket API,实现从服务器中推送信息到客户端. Socket又称为套接字,是基于W3C标准开发在一个TCP接口中进行双向通信的技术.通常情况下,Socket用于描述IP地址和端口,是通信过程中的一个字符句柄.当服务器端又多个应用服务绑定一个Socket时,通过通信中的字符句柄,实现不同端口对应不同应用服务功能.目前,大部分浏览器都支持HTML5中Socket API的运行. WebSocket连接服务器和客户端,这个链接是一个实时的长连接,服务

利用html5、websocket和opencv实现人脸检测

最近学习人脸识别相关的东西,在MFC下使用OpenCV做了一个简单的应用.训练需要较多的数据,windows应用程序终究还是不方便,于是想着做成CS模式:检测识别都放在服务器端,视频获取和显示都放在网页端. 在网上找了一些资料,实现了简单的人脸检测.人脸识别只要在这个框架上加点代码就行.主要参考了下面这篇文章: http://www.open-open.com/home/space-361-do-blog-id-8960.html jetty版本:jetty-9.2.17.v20160517 j

HTML5之WebSocket(转自知乎)

在认识websocket之前,我们必须了解的是websocket有什么用? 他能解决我们遇到的什么问题? 如果没用,那么我们就么有使用它的必要的. websocket就是建立起全双工协议的,提高了效率,节省了时间. 什么是WebSocket? WebSocket一种在单个 TCP连接上进行全双工通讯的协议.即WebSocket是一个协议. websocket是基于TCP协议的. 比较通俗的理解,我们可以点击这里. 推荐文章:  https://zhuanlan.zhihu.com/p/23467