前端websocket开发

时至今日，websocket在前端开发中占据着很重要的地位，如极其常用的心跳检测功能。甚至还有大量的站点以其作为主要的数据传输工具以替代Ajax，以下我们来介绍下如何正常地使用websocket进行前端开发。

安装

首先引用websocket模块。当然你也可以自己去实现，为了避免重复造轮子，我们开源的websocket包。

npm install websocket

初始化

var W3CWebSocket = require('websocket').w3cwebsocket;

示例

let W3CWebSocket = require('websocket').w3cwebsocket;
 
let client = new W3CWebSocket('ws://localhost:8080/', 'echo-protocol');
 
client.onerror = function() {
    console.log('Connection Error');
};
 
client.onopen = function() {
    console.log('WebSocket Client Connected');
 
    function sendNumber() {
        if (client.readyState === client.OPEN) {
            let number = Math.round(Math.random() * 0xFFFFFF);
            client.send(number.toString());
            setTimeout(sendNumber, 1000);
        }
    }
    sendNumber();
};
 
client.onclose = function() {
    console.log('echo-protocol Client Closed');
};
 
client.onmessage = function(e) {
    if (typeof e.data === 'string') {
        console.log("Received: '" + e.data + "'");
    }
};

浏览器兼容性介绍

火狐
Firefox 7-9 (Old) (Protocol Version 8)
Firefox 10+ (Protocol Version 13)

谷歌
Chrome 14,15 (Old) (Protocol Version 8)
Chrome 16+ (Protocol Version 13)

IE
Internet Explorer 10+ (Protocol Version 13)

Safari
Safari 6+ (Protocol Version 13)