一、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(依赖)
- {
- "name":"sockjsDemo",
- "version":"0.0.1",
- "dependencies":{
- "node-static":"0.5.9",
- "sockjs":"*"
- }
- }
2. server.js(服务端)
- /* 第1步:引入所需模块【http模块、sockjs模块、静态文件服务器处理模块】*/
- var http = require('http');
- var sockjs = require('sockjs');
- var node_static = require('node-static');
- /* 第2步:创建sockjs服务 */
- var sockjs_opts = {sockjs_url:"http://cdn.jsdelivr.net/sockjs/1.0.1/sockjs.min.js"};
- var sockjs_server = sockjs.createServer(sockjs_opts);
- sockjs_server.on('connection',function(conn){
- conn.on('data',function(message){
- conn.write('我就不告诉你' + message);
- });
- });
- /* 第3步:指定静态服务文件目录 */
- var static_directory = new node_static.Server(__dirname);
- /* 第4步:传递http请求和响应给指定目录 */
- var server = http.createServer();
- server.addListener('request', function(req, res) {
- static_directory.serve(req, res);
- });
- server.addListener('upgrade', function(req, res){
- res.end();
- });
- /* 第5步:将sockjs服务挂载到http服务上 */
- sockjs_server.installHandlers(server,{prefix:'/sockjsDemo'});
- /* 第6步:指定监听端口和地址 */
- console.log(' [*] Listening on 0.0.0.0:10086' );
- 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); }