WebSocket

原文
WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯，它建立在 TCP 之上，同 HTTP 一样通过 TCP 来传输数据，但是它和 HTTP 最大不同是：

1. WebSocket 是一种双向通信协议，在建立连接后，WebSocket 服务器和 Browser/Client Agent 都能主动的向对方发送或接收数据，就像 Socket 一样

2. WebSocket 需要类似 TCP 的客户端和服务器端通过握手连接，连接成功后才能相互通信。

   WebSocket 服务端 API 示例

//将 WebSocket 服务端运行在 ws://[Server 端 IP 或域名]:[Server 端口]/websockets/echo 的访问端点
@ServerEndpoint("/echo")
public class EchoEndpoint {

 //在这个端点一个新的连接建立时被调用
@OnOpen
public void onOpen(Session session) throws IOException {
//以下代码省略...
}

@OnMessage
public String onMessage(String message) {
//以下代码省略...
}

@Message(maxMessageSize=6)
public void receiveMessage(String s) {
//以下代码省略...
} 

@OnError
public void onError(Throwable t) {
//以下代码省略...
}
 //在连接被终止时调用。
@OnClose
public void onClose(Session session, CloseReason reason) {
//以下代码省略...
} 

}

WebSocket 客户端 API

//申请一个 WebSocket 对象，参数是需要连接的服务器端的地址，同 HTTP 协议开头一样，WebSocket 协议的 URL 使用 ws://开头，另外安全的 WebSocket 协议使用 wss://开头
var ws = new WebSocket(“ws://echo.websocket.org”); 
//当 Browser 和 WebSocketServer 连接成功后，会触发 onopen 消息；
 ws.onopen = function(){ws.send(“Test!”); }; 
 //当 Browser 接收到 WebSocketServer 发送过来的数据时，就会触发 onmessage 消息，参数 evt 中包含 Server 传输过来的数据
 ws.onmessage = function(evt){console.log(evt.data);ws.close();}; 
 //当 Browser 接收到 WebSocketServer 端发送的关闭连接请求时，就会触发 onclose 消息。我们可以看出所有的操作都是采用异步回调的方式触发，这样不会阻塞 UI，可以获得更快的响应时间，更好的用户体验
 ws.onclose = function(evt){console.log(“WebSocketClosed!”);}; 
 //如果连接失败，发送、接收数据失败或者处理数据出现错误，browser 会触发 onerror 消息
 ws.onerror = function(evt){console.log(“WebSocketError!”);};

例子

 var websocket=window.WebSocket || window.MozWebSocket;
    var isConnected = false;
    initWebSocket("ws://121.40.165.18:8088");
    function doOpen(){
        isConnected = true;


    }

    function doClose(){
        alert(("已经断开连接");
        isConnected = false;
    }

    function doError() {
        alert(("连接异常");
        isConnected = false;

    }

    function doMessage(message){
        var event =message;
        doReciveEvent(event);
    }

    function doSend(message) {
        if (websocket != null) {
            websocket.send(JSON.stringify(message));
        } else {
            alert(("您已经掉线，无法与服务器通信!");
        }
    }

    //初始话 WebSocket
    function initWebSocket(wcUrl) {
        if (window.WebSocket) {
            websocket = new WebSocket(encodeURI(wcUrl));
            websocket.onopen = doOpen;
            websocket.onerror = doError;
            websocket.onclose = doClose;
            websocket.onmessage = doMessage;
        }
        else{
            alert(("您的设备不支持 webSocket!");

        }
    };

    function doReciveEvent(event){
//设备不存在，客户端断开连接
        if(event.eventType==101){
            alert(("设备不存在或设备号密码错");
            websocket.close();
        }
//返回组设备及计算目标位置信息，更新地图
        else if(event.eventType==104||event.eventType==103){


            alert(("infoField","有新报修设备或设备离线, 地图已更新！", "infoDialog");
        }

    }

doOpen 回调函数处理打开 WebSocket，A 类设备或者 B 类设备连接上 WebSocket 服务端后，将初始化地图并显示默认位置，然后向服务端发送设备登入的消息。
doReciveEvent 函数处理关闭 WebSocket，A 类/B 类设备离线（退出移动终端上的应用）时，服务端关闭 HTTP 长连接，客户端 WebSocket 对象执行 onclose 回调句柄。
initWebSocket 初始化 WebSocket，连接 WebSocket 服务端，并设置处理回调句柄，如果浏览器版本过低而不支持 HTML5，提示客户设备不支持 WebSocket。
doSend 函数处理客户端向服务端发送消息，注意 message 是 JSON OBJ 对象，通过 JSON 标准 API 格式化字符串。
doMessage 函数处理 WebSocket 服务端返回的消息，后台返回的 message 为 JSON 字符串，通过 jQuery 的 parseJSON API 格式化为 JSON Object 以便客户端处理 doReciveEvent 函数时客户端收到服务端返回消息的具体处理，由于涉及大量业务逻辑在此不再赘述。

另外node.js 同样可以创建websocket服务器 就是 /socket.io