借助node实战WebSocket
| 一、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请求。
如下：
<!DOCTYPE html>
<head>
<title>WebSocket</title>
</head>
<body>
<script>
//创建WebSocket对象请求
var socket = new WebSocket('ws://127.0.0.1:8080/');
</script>
</body>
</html>
EntireCode
其次，采用回调函数监听相应事件，并处理。监听事件一共四个：
1、 onpen ：请求成功时，触发
2、 onclose ：请求关闭时，触发
3、 onerror ：请求或连接期间出错时，触发
4、 onMessage ：接收服务器发送来的消息时，触发
另，当发送请求时，创建的WebSocket 实例，有个状态值readyState：
1、 0 : 代表还没连接或正在连接；
2、 1 : 代表连接成功；
3、 2 : 代表正在关闭连接；
4、 3 : 代表连接关闭。
我们在该demo中加入这四个监听事件。
如下：
<!DOCTYPE html>
<head>
<title>WebSocket</title>
</head>
<body>
<script>
//创建WebSocket对象请求
var socket = new WebSocket('ws://127.0.0.1:8080/');
//相应监听事件
socket.onopen = onOpen;
socket.onclose = onClose;
socket.onerror = onError;
socket.onmessage = onMessage;
</script>
</body>
</html>
EntireCode
在这监听事件中，你可以按照你的意愿添加触发函数。
如下：
<!DOCTYPE html>
<head>
<title>WebSocket</title>
</head>
<body>
<script>
var onOpen = function(event){
console.log('Socket opened. readyState:'+socket.readyState);
var msg = {
type: "message",
text: "something",
id: "number",
time: Date.now()
};
//send可以向后台发送字符串、Blob或ArrayBuffer，固传入对象时，利用JSON对其序列化
socket.send(JSON.stringify(msg));
};
var onClose = function(event){
console.log('Socket closed.readyState:'+socket.readyState);
console.log('Connected to: ' + event.currentTarget.url);
};
var onMessage = function(data){
console.log("We get signal:");
console.log(data);
console.log('onMessageready: ' + socket.readyState);
};
var onError = function(event){
console.log("We got an error.: " + event.data);
};
var socket = new WebSocket('ws://127.0.0.1:8080/');
socket.onopen = onOpen;
socket.onclose = onClose;
socket.onerror = onError;
socket.onmessage = onMessage;
</script>
</body>
</html>
EntireCode
| 三、node创建服务器 |
借助于node创建一个简易的服务器，以便看清整个WebSocket的流程。
因为是WebSocket协议，所以在node中你需要引入ws模块，假设我们监听的端口号为8080。
如下：
//需要ws模块
var WebSocketServer = require('ws').Server;
//并创建wss服务器
var wss = new WebSocketServer({port: 8080});
EntireCode
接着，我们需要在连接成功后，我们可以向客服端发送一点点东西，如’hello world’，以及监听客服端发送信息来时的事件message。
如下：
//需要ws模块
var 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!!');
EntireCode
| 四、运行 |
前提：因为引入了ws模块，所以需要引入ws模块：npm install ws
首先，运行node搭建的简易服务器（我将其存储在D:WebSocket/server.js）。
如下：
接着，运行客服端代码，打开chrome调试器得下：
再看看刚才的node环境，得下：
固，它们已经可以互相通信了。
我们再打开chrome调试器，具体看看WebSocket请求，如下：
在RequestHeaders中，”Connection:Upgrade”表示浏览器通知服务器，如果可以就升级为websocket协议。Origin用于验证浏览器域名是否在服务器许可范围内。Sec-WebSocket-Key则用于握手协议密钥，是base64编码的16字节随机字符串。Upgrade头信息表示将通信协议从HTTP/1.1转向该项所指定的协议。
在ResponseHeaders中，”Connection:Upgrade”通知浏览器，需要改变协议。Sec-WebSocket-Accept是服务器在浏览器提供的Sec-WebSocket-Key字符串后面，添加“258EAFA5-E914-47DA-95CA-C5AB0DC85B11” 字符串，然后再取sha-1的hash值。浏览器将对这个值进行验证，以证明确实是目标服务器回应了webSocket请求。
| 五、拓展阅读 |
[1] 阮一峰，WebSocket
[2] Divid Walsh，WebSocket and Socket.IO
[3] socket.io
[4] Writing WebSocket client applications
借助node实战WebSocket的更多相关文章
- 借助node实战JSONP跨域
一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...
- node.js Websocket实现扫码二维码登录---GoEasy
最近在做一个扫码登录功能,为此我还在网上搜了一下关于微信的扫描登录的实现方式.当这个功能完成了后,我决定将整个实现思路整理出来,方便自己以后查看也方便其他有类似需求的程序猿些. 要实现扫码登录我们需要 ...
- node.js Websocket消息推送---GoEasy
Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送 速度快,代码简单易懂上手快 浏览器兼容性:GoEasy推送 支持websocket ...
- Node.js+websocket+mongodb实现即时聊天室
ChatRoom Node.js+websocket+mongodb实现即时聊天室 A,nodejs简介:Node.js是一个可以让javascript运行在服务器端的平台,它可以让javascrip ...
- 基于Node.js + WebSocket 的简易聊天室
代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...
- 借助Nodejs探究WebSocket
文章导读: 一.概述-what's WebSocket? 二.运行在浏览器中的WebSocket客户端+使用ws模块搭建的简单服务器 三.Node中的WebSocket 四.socket.io 五.扩 ...
- node.js+websocket实现简易聊天室
(文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) websocket提供了一种全双工客户端服务器的异步通信方法,这种通信方法使用ws或者wss协议,可 ...
- Node.js Websocket 区分不同的用户
实现ws://serverIP:port/:param1/:param2 .通过param1,param2来管理不同的ws回话,以便实现群发和指定用户的消息推送 npm install ws --sa ...
- Node.js+webSocket
// 引入WebSocket模块 var ws = require('nodejs-websocket') var PORT = 3030 var server = ws.createServer(f ...
随机推荐
- spring3.0使用annotation完全代替XML
@Service与@Component有什么不同?那天被问到这个问题,一时之间却想不起来,就利用这篇文章来纪录spring3.0中常用的annotation. 从spring2.5开始,annotat ...
- ST
这次说一下测试的基础部分 软件测试 软件测试(英语:software testing),描述一种用来促进鉴定软件的正确性.完整性.安全性和质量的过程.换句话说,软件测试是一种实际输出与预期输出间的审核 ...
- Dubbo与Zookeeper、SpringMVC整合和使用（负载均衡、容错）
互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,Dubbo是一个分布式服务框架,在这种情况下诞生的.现在核心业务抽取出来,作为独立的服务,使 ...
- SQLServer触发器创建、删除、修改、查看
一: 触发器是一种特殊的存储过程﹐它不能被显式地调用﹐而是在往表中插入记录﹑更新记录或者删除记录时被自动地激活.所以触发器可以用来实现对表实施复杂的完整性约束. 二: SQL Server为每个触发器 ...
- SQL Server 里的递归查询
http://www.360doc.com/content/13/0607/11/8463843_291221684.shtml
- CentOS7 编译安装 Mongodb (实测 笔记 Centos 7.0 + Mongodb 2.6.6)
环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G,双网卡) 系统版本:CentOS-7.0-1406-x86_64-DVD.iso 安装步骤: 1.准备 1.1 显示系统版 ...
- mysql 命令行还原备份数据库
通常数据库还原备份可以通过navicat等数据库管理工具进行,只需要简单的导出导入就行了,但遇到有索引外键的数据库,数据库管理工具运行.sql文件会报错,这时候可以尝试命令行导入,亲测可以成功 MyS ...
- 工作总结_JS_1
获取点击下的相对应的div: $('> div', this).show(); 本身同级下的相对应的div: $('>div[name=vv]', $(this).siblings(& ...
- nginx-nginx.conf脚本
user www www; worker_processes ; error_log /usr/local/nginx/logs/error.log info ; pid /var/run/nginx ...
- StartSSL免费SSL证书申请和账户注册完整过程
StartSSL算是比较早提供免费SSL证书的第三方提供商,我们可以免费申请且免费续期使用到有需要HTTPS网址的用户.关于网站使用SSL证书主要还是因为谷歌在向导说明中提到如果一个网站使用到SSL证 ...