websocket

一、SockJS

SockJS是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。

服务端：sockjs-node（https://github.com/sockjs/sockjs-node）

客户端：

sockjs-clien（https://github.com/sockjs/sockjs-client）

node-static（https://www.npmjs.com/package/node-static）是Node.js兼容HTTP静态文件服务器处理模块，提供内置的缓存支持。

二、实例

1. package.json(依赖)

[javascript] view plain copy

1. {  
2.     "name":"sockjsDemo",  
3.     "version":"0.0.1",  
4.     "dependencies":{  
5.         "node-static":"0.5.9",  
6.         "sockjs":"*"  
7.     }  
8. }  

2. server.js(服务端)

[javascript] view plain copy

1. /* 第1步：引入所需模块【http模块、sockjs模块、静态文件服务器处理模块】*/  
2. var http = require('http');  
3. var sockjs = require('sockjs');  
4. var node_static = require('node-static');  
5.   
6. /* 第2步：创建sockjs服务 */  
7. var sockjs_opts = {sockjs_url:"http://cdn.jsdelivr.net/sockjs/1.0.1/sockjs.min.js"};  
8. var sockjs_server = sockjs.createServer(sockjs_opts);  
9. sockjs_server.on('connection',function(conn){  
10.     conn.on('data',function(message){  
11.         conn.write('我就不告诉你' + message);  
12.     });  
13. });  
14.   
15. /* 第3步：指定静态服务文件目录 */  
16. var static_directory = new node_static.Server(__dirname);  
17.   
18. /* 第4步：传递http请求和响应给指定目录 */  
19. var server = http.createServer();  
20. server.addListener('request', function(req, res) {  
21.     static_directory.serve(req, res);  
22. });  
23. server.addListener('upgrade', function(req, res){  
24.     res.end();  
25. });  
26.   
27. /* 第5步：将sockjs服务挂载到http服务上 */  
28. sockjs_server.installHandlers(server,{prefix:'/sockjsDemo'});  
29.   
30. /* 第6步：指定监听端口和地址 */  
31. console.log(' [*] Listening on 0.0.0.0:10086' );  
32. server.listen(10086, '127.0.0.1');  

3. index.html(客户端)

下载stomp.js

https://raw.githubusercontent.com/jmesnil/stomp-websocket/master/lib/stomp.js  

js 代码

var websocket = null;

//判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
    websocket = new WebSocket("ws://localhost:9090/websocket");
}
else{
    alert('Not support websocket')
}

//连接发生错误的回调方法
websocket.onerror = function(){
    setMessageInnerHTML("error");
};

//连接成功建立的回调方法
websocket.onopen = function(event){
    setMessageInnerHTML("open");
}

//接收到消息的回调方法
websocket.onmessage = function(event){
    setMessageInnerHTML(event.data);
}

//连接关闭的回调方法
websocket.onclose = function(){
    setMessageInnerHTML("close");
}

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function(){
    websocket.close();
}

//将消息显示在网页上
function setMessageInnerHTML(innerHTML){
    document.getElementById('message').innerHTML += innerHTML + '<br/>';
}

//关闭连接
function closeWebSocket(){
    websocket.close();
}

//发送消息
function send(){
    var message = document.getElementById('text').value;
    websocket.send(message);
}