HTML5中WebSocket API的用法示例

这篇文章主要介绍了HTML5中WebSocket API的用法示例，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

一、什么是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。下面的代码片段是打开一个连接，为连接创建事件监听器，断开连接，消息时间，发送消息返回到服务器，关闭连接。

// 创建一个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()

描述： 使用连接发送数据            关闭连接

感谢你能够认真阅读完这篇文章，希望小编分享的“HTML5中WebSocket API的用法示例”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!