html中使用websocket实现通过实时通功能

最近因为项目需要，研究了下html5 WebSocket，Firefox 旧版要加上Moz做兼容。

在支持WebSocket的浏览器中，在创建socket之后。可以通过onopen（当websocket创建成功时，即会触发onopen事件），onmessage（当客户端收到服务端发来的消息时，会触发onmessage事件，参数evt.data中包含server传输过来的数据），onclose（当客户端收到服务端发送的关闭连接的请求时，触发onclose事件）即onerror（如果出现连接，处理，接收，发送数据失败的时候就会触发onerror事件）四个事件实现对socket进行响应，其中在open以后可使用内置send方法实现信息发送进行通迅。申请一个WebSocket对象，参数是需要连接的服务器端的地址，同http协议使用https://开头一样，WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。

示例demo:
[codesyntax lang=”javascript”]

<script type="text/javascript">
var conn = null;
//连接
function openConnection(url) {
    if (window.WebSocket) {
        conn = new WebSocket(url);
    } else if (window.MozWebSocket) {
        conn = new MozWebSocket(url);
    } else {
        alert('您的浏览器不支持WebSocket。');
        return;
    }
    //打开连接
    conn.onopen = function() {
        console.log('开始发送请求Ping...');
        conn.send('Ping...');
    };
    //失败
    conn.onerror = function(error) {
        console.log(error);
        conn.close();
    };
    //返回信息
    conn.onmessage = function(event) {
        var message = event.data; //JSON.parse(event.data);
        console.log('服务器返回：'+message);
    };
    //关闭
    conn.onclose = function(event) {
        var message = event; //JSON.parse(event.data);
        if(message){
            conn.close();
            console.log("关闭连接");
        }
    };
}
//断开连接
function disConnection() {
    if (conn != null) {
        conn.close();
        conn = null;
    }
}
//初始化
window.onload = function() {
   openConnection('ws://echo.websocket.org');  
}
    //关闭页面
window.onunload = function() {
    disConnection();
}
</script>

[/codesyntax]

转载请注明：TUTERM.COM » html中使用websocket实现通过实时通功能