websockt 实现

客户端代码如下：

   

    Welcome

    发送消息

   

---

    关闭WebSocket连接

    开启WebSocket连接

   

---

   

    var websocket = null;

var timeout=6000;

var time;

var msg="heart is run";

    //判断当前浏览器是否支持WebSocket

    if ('WebSocket' in window) {

        websocket = new WebSocket("ws://127.0.0.1:8080/");

    }

    else {

       

    }

    //连接发生错误的回调方法

    websocket.onerror = function () {

        setMessageInnerHTML("WebSocket连接发生错误");

    };

    //连接成功建立的回调方法

    websocket.onopen = function () {

        setMessageInnerHTML("WebSocket连接成功");

       setInterval(function(){

        if (websocket.readyState==1) {

        websocket.send(msg); 

        }

if(new Date()-time> timeout){

websocket=new WebSocket("ws://127.0.0.1:8080/");

} 

},1000*10);    

    }

    //接收到消息的回调方法

    websocket.onmessage = function (event) {

        setMessageInnerHTML(event.data);

        var data=JSON.parse(event.data);

        if(data.a=='ok')

{

time=new Date();

}

    }

    //连接关闭的回调方法

    websocket.onclose = function () {

        setMessageInnerHTML("WebSocket连接关闭");

    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。

    window.onbeforeunload = function () {

        closeWebSocket();

    }

    //将消息显示在网页上

    function setMessageInnerHTML(innerHTML) {

        document.getElementByIdx_x('message').innerHTML += innerHTML + '
';

    }

    //关闭WebSocket连接

    function closeWebSocket() {

        websocket.close();

    }

    //开启WebSocket连接

    function openWebSocket() {

    websocket = new WebSocket("ws://localhost:8080/websocket");

    }

    //发送消息

    function send() {

        var message = document.getElementByIdx_x('text').value;

        websocket.send(message);

    }

服务器端代码如下：

var WebSocketServer = require('ws').Server;

var  wss = new WebSocketServer({port: 8080});

wss.on('connection', function(ws) {

    ws.on('message', function(message) {

   

        console.log('received: %s', message);

    });

   

    ws.send('{"a":"ok","b":"b","c":"c","d":"d"}');

});