认识HTML5的WebSocket

98 阅读 0 评论 65 点赞

我是靠谱客的博主搞怪豌豆，最近开发中收集的这篇文章主要介绍认识HTML5的WebSocket，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

认识HTML5的WebSocket

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

一、什么是WebSocket API?
WebSocket API是下一代客户端-服务器的异步通信方法。该通信取代了单个的TCP套接字，使用ws或wss协议，可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持。

WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信。

Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建，用于双向推送消息。

二、WebSocket API的用法
只专注于客户端的API，因为每个服务器端语言有自己的API。下面的代码片段是打开一个连接，为连接创建事件监听器，断开连接，消息时间，发送消息返回到服务器，关闭连接。
CODE:

// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080'); 
// 打开Socket 
socket.onopen = function(event) { 
  // 发送一个初始化消息
  socket.send('I am the client and I'm listening!'); 
  // 监听消息
  socket.onmessage = function(event) { 
    console.log('Client received a message',event); 
  }; 
  // 监听Socket的关闭
  socket.onclose = function(event) { 
    console.log('Client notified socket has closed',event); 
  }; 
  // 关闭Socket.... 
  //socket.close() 
};
登录后复制

WebSocket是HTML5开始提供的一种单个TCP连接上进行全双工通讯的协议。
在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据相互传送。

浏览器通过JavaScript向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务器之间就可以通过TCP连接直接交换数据。

当你获取Web Socket连接后，你可以通过send（）方法来向服务器发送数据，并通过onmessage事件来接受服务器返回的数据。

以下api用于创建WebSocket对象。

var socket = new WebSocket(url,[protocol]);
以上代码中第一个参数url，指定链接的URL。第二个参数protocol是可选的，指定了可接受的子协议。

WebSocket 属性

以下是WebSocket对象的属性。假定我们使用了以上代码创建了socket对象：
Socket.readyState 只读属性readyState表示连接状态，可以是以下值：
1. 0-表示连接尚未建立。
2. 1-表示链接已经建立，可以进行通行。
3. 2-表示连接正在进行关闭。
4. 3-表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount 只读butteredAmount已经send（）放入正在队列中等待传输，但是还没有发出的UTF-8文本字节数。

WebSocket事件
以下是WebSocket对象的相关事件。假定我们使用了创建的socket：
事件：open message error close
事件处理程序：Socket.onopen Socket.onmessage Socket.onerror Socket.onclose
描述：连接建立触发客户端接受服务器端数据时触发通信发生错误时触发连接关闭时触发

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

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