借助node实战WebSocket - 猴子猿_H5之家 - 中国HTML5教程资源分享第一站

一、WebSocket概述

WebSocket协议，是建立在TCP协议上的，而非HTTP协议。

如下：

ws://127.0.0.1或wss://127.0.0.1就是WebSocket请求。

注：ws表示WebSocket协议，wss表示加密的WebSocket协议。

WebSocket的好处就是允许服务器和客服端进行实时地互相通信，而不像Ajax那样，只能由客服端发起请求，并且WebSocket不受同源策略限制，这恰恰是Ajax的软肋。

好了，初步了解WebSocket后，我们就一起一步步探究实现一个Demo吧。

二、客服端之旅

因为是基于WebSocket嘛，那在客服端，首先，得发起一个WebSocket请求。

如下：

WebSocket);

EntireCode

其次，采用回调函数监听相应事件，并处理。监听事件一共四个：

　　1、 onpen ：请求成功时，触发

　　2、 onclose ：请求关闭时，触发

　　3、 onerror ：请求或连接期间出错时，触发

　　4、 onMessage ：接收服务器发送来的消息时，触发

另，当发送请求时，创建的WebSocket 实例，有个状态值readyState：

　　1、 0 : 代表还没连接或正在连接；

　　2、 1 : 代表连接成功；

　　3、 2 : 代表正在关闭连接；

　　4、 3 : 代表连接关闭。

我们在该demo中加入这四个监听事件。

如下：

WebSocket); onOpen; socket.onclose = onClose; socket.onerror = onError; socket.onmessage = onMessage;

EntireCode

在这监听事件中，你可以按照你的意愿添加触发函数。

如下：

WebSocket(event){ console.log(socket.readyState); { type: , text: , id: , time: Date.now() }; //send可以向后台发送字符串、Blob或ArrayBuffer，固传入对象时，利用JSON对其序列化 socket.send(JSON.stringify(msg)); }; (event){ console.log(socket.readyState); console.log( event.currentTarget.url); }; (data){ console.log(); console.log(data); console.log( socket.readyState); }; (event){ console.log( event.data); }; ); socket.onopen = onOpen; socket.onclose = onClose; socket.onerror = onError; socket.onmessage = onMessage;

EntireCode

三、node创建服务器

借助于node创建一个简易的服务器，以便看清整个WebSocket的流程。

因为是WebSocket协议，所以在node中你需要引入ws模块，假设我们监听的端口号为8080。

如下：

WebSocketServer = require('ws').Server; wss = new WebSocketServer({port: 8080});

EntireCode

接着，我们需要在连接成功后，我们可以向客服端发送一点点东西，如’hello world’，以及监听客服端发送信息来时的事件message。

如下：

WebSocketServer = require('ws').Server; var wss = new WebSocketServer({port: 8080}); wss.on('connection', function(ws){ ws.on('message', function(message){ var obj = JSON.parse(message); console.log('received: %s', obj.time); }); ws.send('hello world'); }); console.log('running!!');