HTML5 WebSocket知多少

本文介绍WebSocket通信协议,一种在单个TCP连接上进行全双工通讯的技术。文章解释了WebSocket的工作原理,包括如何通过JavaScript建立连接、关键属性、事件及方法。

Html5培训课程中,你知道WebSocket是一个通信协议吗?接下来我们了解一下它吧。

 一、 什么是WebSocket 

1、WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 
2、在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 
3、浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。 
 当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。以下 API 用于创建 WebSocket 对象 
var Socket = new WebSocket(url, [protocol] ); 

 提示:以上代码中的第一个参数 url, 指定连接的 URL。

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

二、WebSocket 属性 
以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 
Socket 对象: Socket.readyState  
只读属性 readyState 表示连接状态,可以是以下值: 0 - 表示连接尚未建立。 

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

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

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

 Socket.bufferedAmount  

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。

 三、WebSocket 事件 

以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象: 

事件           事件处理程序       描述 

open          Socket.onopen    连接建立时触发 

message      Socket.onmessage 客户端接收服务端数据时触发

 error          Socket.onerror    通信发生错误时触发

 close          Socket.onclose    连接关闭时触发  

四、WebSocket 方法 
以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象: 

方法 描述 Socket.send()      使用连接发送数据 Socket.close()     关闭连接

 五、WebSocket 实例 

WebSocket 协议本质上是一个基于 TCP 的协议。 
为了建立一个 WebSocket 连接,客户端浏览器首先要向服务器发起一个 HTTP 请求,这个请求和通常的 HTTP 请求不同,包含了一些附加头信息,其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求,服务器端解析这些附加的头信息然后产生应答信息返回给客户端,客户端和服务器端的 WebSocket 连接就建立起来了,双方就可以通过这个连接通道自由的传递信息,并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值