Web Sockets API

WebSockets通信

Web Sockets是H5提供的在web应用程序中客户端与服务器端之间进行的非HTTP的通信机制。
  使用Web Sockets API可以在服务器与客户端之间建立一个非HTTP的双向连接。这个连接是实时的，也是永久的，除非被显示关闭。这意味着当服务器想向客户端发送数据时，可以立即将数据推送到客户端的浏览器中，无需重新建立连接。只要客户端有一个被打开的socket（套接字）并且与服务器建立了连接，服务器就可以把数据推送到这个socket上，服务器不再需要轮询客户端的请求，从被动转为了主动。

API的基本用法

要连接通信端点，只需要创建一个新的WebSocket实例，并提供希望连接的对端URL字符串。ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。

if(window.WebSocket){ //进行检测，确保浏览器支持WebSocket
    var webSocket=new WebSocket("ws://localhost:8005/socket");
}

打开socket后只需要等待事件发生，而不需要主动向服务器轮询，所以需要在WebSocket对象中添加回调函数来监听事件。
  WebSocket对象有三个事件：open、close和message。当连接建立时触发open事件，当收到消息时触发message事件，当WebSocket连接关闭时触发close事件。

webSocket.onopen=function(event)
{
    //开始通信时的处理
    webSocket.send("Hello WebSocket!");
}
webSocket.onmessage=function(event)
{
    var data=event.data;
}
webSocket.onclose=function(event)
{
    //结束通信时的处理
}

当socket处于打开状态（即调用onopen监听程序之后，调用onclose监听程序之间前），可以采用send方法来向服务器发送数据。只能发送文本数据，但是可以使用JSON对象把任何JS对象转换成文本数据后进行发送。

document.getElementById("sendBtn").onclick=function(){
    webSocket.send("data");
}

消息发送完成后，可以通过close方法来关闭socket，切断通信连接。

webSocket.close();

另外，还可以通过读取readyState的属性值来获取WebSocket对象的状态。readyState属性存在以下几种属性值：

• CONNECTING（数字值为0），表示正在连接。
• OPEN（数字值为1），表示已建立连接。
• CLOSING（数字值为2），表示正在关闭连接。
• CLOSED（数字值为2），表示已关闭连接。

实例

在运行前，首先要在服务器端指定好它的socket（套接字）应用程序，并在服务器的配置文件中指定好运行该socket应用程序的主机与端口，然后再运行配置好的服务器。

  

  
 
 
 
  
    
WebSockets客户端示例
  
    

    
请输入一些文字
  
    
    建立连接  
    发送数据 
    断开连接