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应用程序的主机与端口，然后再运行配置好的服务器。

<html>  
<meta charset="UTF-8"></meta>
<head>  
<title>WebSockets客户端示例</title> 
</head> 
<script>
var webSocket;
function connect()
{
    try
    {
        var readyState=new Array("正在连接","已建立连接","正在关闭连接","已关闭连接");
        var host="ws://localhost:8005/socket";
        webSocket=new WebSocket(host);
        var message=document.getElementById("message");
        message.innerHTML+="<p>Socket状态："+readyState[webSocket.readyState]+"</p>";
        webSocket.onopen=function()
        {
            message.innerHTML+="<p>Socket状态："+readyState[webSocket.readyState]+"</p>";
        }
        webSocket.onmessage=function(msg)
        {
            message.innerHTML+="<p>接收信息："+msg.data+"</p>";
        }
        webSocket.onclose=function()
        {
            message.innerHTML+="<p>Socket状态："+readyState[webSocket.readyState]+"</p>";
        }
    }
    catch(exception)
    {
    message.innerHTML+="<p>有错误发生</p>";
    }
}
function send()
{
    var text=document.getElementById("text").value;
    var message=document.getElementById("message");
    if(text=="")
    {
    message.innerHTML+="<p>请输入一些文字</p>";
        return;
    }
    try
    {
        webSocket.send(text);
        message.innerHTML+="<p>发送数据："+text+"</p>";
    }
    catch(exception)
    {
    message.innerHTML+="<p>发送数据出错</p>";
    }
    document.getElementById("text").value="";
}
function disconnect()
{
    webSocket.close();
}
</script> 
<body>  
    <h1>WebSockets客户端示例</h1>  
    <div id="message"></div>
    <p>请输入一些文字</p>  
    <input id="text" type="text"></input>
    <button id="connect" onclick="connect();">建立连接</button>  
    <button id="send" onclick="send();">发送数据</button> 
    <button id="disconnect" onclick="disconnect();">断开连接</button>  
</body>  
</html>

Web Sockets API

WebSockets通信

API的基本用法

实例

推荐阅读更多精彩内容