文章导读:

一、概述-what's WebSocket?

1.1 为什么我们需要WebSocket这样的实时的通信协议?

WebSocket是web通信方式的一种,像我们熟知的HTTP协议也是web通信方式的一种。但是我们知道HTTP协议是一种无状态的协议,其服务端本身不具备识别客户端的能力,必须借助外部的一些信息比如说session和cookie,才能与特定的客户端保持通信。也就是说我们所发送的每一个HTTP的请求都会带上请求头中一些相应的信息还有cookie,这明显会增加我们传输的信息的体量从而带来一定的网络延迟,对于一些对通信的实时性要求比较高的应用来说就是不可忍受的了,比如说聊天程序或者是运行在浏览器中的实时小游戏。最郁闷的却还是这些头信息和cookie往往对于服务器响应客户端的请求来说是多余的,也就是说虽然我每个请求都带了这些信息,但是服务器与客户端的交互过程中可能根本用不上这些信息。

为了改善HTTP请求的这种网络延迟的情况,也出现了一些适应不同需求的其他的[web通信]方式,比如说:轮询,长轮询(long-polling),数据流,EventSouce等等,WebSocket便是其中一种。

实际上大多数基于因特网(或者局域网)的网络链接通常都包含长连接和基于TCP套接字的双向消息交换。但是TCP协议是属于最底层的网络通信协议了,让一些不能信任的客户端脚本去访问底层的TCP套接字显然是不太安全的,因此WebSocket实现了一种较为安全的方案,它允许客户端脚本在客户端和支持WebSocket协议的服务器之间创建双向的套接字连接。从而使实时通信的某些网络操作变得简单。

1.2 WebSocket是如何工作的?

我们知道了WebSocket的主要作用是,允许服务器端与客户端进行全双工(full-duplex)的实时通信。这里有个例子特别好:HTTP协议像发电子邮件,发出后必须等待对方回信;WebSocket则是像打电话,服务器端和客户端可以同时向对方发送数据,它们之间存着一条持续打开的数据通道。

我们先看一下一个基于WebSocket协议通信的请求头和响应头(下面简单实例中的一个消息头):

其中与WebSocket协议相关的信息:

 Upgrade:websocket-------HTTP1.1协议规定,Upgrade头信息表示将通信协议从HTTP/1.1转向该项所指定的协议;
Connection:Upgrade------表示浏览器通知服务器,如果允许,就将通信协议升级到websocket协议;
Origin------------------用于验证浏览器域名是否在服务器许可的范围内;
Sec-WebSocket-Key-------则是用于握手协议的密钥,是base64编码的16字节随机字符串;
5 Sec-WebSocket-Accept----是服务器在浏览器提供的Sec-WebSocket-Key字符串后面,添加“258EAFA5-E914-47DA-95CA-C5AB0DC85B11” 字符串,然后再取sha-1的hash值。浏览器将对这个值进行验证,以证明确实是目标服务器回应了webSocket请求;
6.Sec-WebSocket-Location--一般情况下还有这个响应消息头用来表示进行通信的WebSocket网址,这里面可能是因为我例子中设置了127.0.0.1,所以这个信息省略掉了。

客户端通过一个WebSocket握手的过程建立一个WebSocket连接。整个过程看起来是这个样子的:

完成握手以后,WebSocket协议就在TCP协议之上,客户端和服务器端就可以开始传送数据了。

websocket协议用ws表示,加密的websocket协议用wss协议,就像普通的HTTP协议用http表示,加密的HTTP协议用https表示一样。

下面我们就通过一些实例看一下websocket的不同实现是如何应用的。

二、 运行在浏览器中的WebSocket客户端+使用ws模块搭建的简单服务器

我们可以通过跑起来这个简单的实例看一下如何编写运行在浏览器中的WebSocket客户端,并且看它是怎样与服务器端交互的。

2.1 运行实例

我们把客户端代码和服务端代码准备好,然后启动服务器监听端口,比如说8080,再然后运行我们的客户端代码即可看到效果。

我们的客户端代码写在html文件中:

 var onOpen = function() {
console.log("Socket opened.");
socket.send("Hi, Server!");
},
onClose = function() {
console.log("Socket closed.");
}, onMessage = function(data) {
console.log("We get signal:");
console.log(data);
}, onError = function() {
console.log("We got an error.");
}, socket = new WebSocket("ws://127.0.0.1:8080/"); socket.onopen = onOpen;
socket.onclose = onClose;
socket.onerror = onError;
socket.onmessage = onMessage;

[查看源码]

我们通过它建立连接并且监听open和messege等事件,与此同时,我们想要得到服务器的响应。服务器端的js代码:

 var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({ port: 8080 }); wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
console.log('received: %s', message);
}); ws.send('something');
});

[查看源码]

这个简单的websocket服务器使用了[ws模块],如果没有安装过,要先安装一下:

 sudo npm install ws

然后在我们的命令行执行:

 node simpleWSserver.js

我们的服务器启动之后,我们运行客户端代码可以看到:

浏览器:

命令行:

整个过程看起来是这个样子的:

2.2 运行在浏览器中的websocket客户端

我们在浏览器中的websocket主要做的事情无非是以下几个:

 建立连接和关闭连接
2 发送数据和接收数据
3 处理错误

对应的会触发以下的事件:

 onopen
onmessage
onclose
onerror

2.2.1 建立连接和关闭连接

通常我们新建了一个WebSocket的实例就可以建立一个连接:

 if(window.WebSocket != undefined) {
var socket = new WebSocket("ws://127.0.0.1:8080/");
}

建立连接之后的WebSocket实例有一个readyState属性,用来标识当前的状态:

0-正在连接
1-连接成功
2-正在关闭
3-关闭成功

连接成功后会触发onopen事件,这时我们就可以向服务器发送数据了:

 var onOpen = function() {
console.log("Socket opened.");
socket.send("Hi, Server!");
}
socket.onopen = onOpen;

要是关闭连接的话就会出发onclose事件:

 var onClose = function() {
console.log("Socket closed.");
}
socket.onclose = onClose;

2.2.2 发送数据和接收数据

在连接建立成功后触发的onopen事件中我们通过send()方法发送数据给服务器:

 socket.send("Hi, Server!");

除了发送字符串类型的数据,也可以使用 Blob 或 ArrayBuffer 对象发送二进制数据。不仅如此,我们还可以发送JSON数据:

  var onOpen = function() {
var msg = {
type: "message",
text: "something",
id: "number",
date: Date.now()
}; // Send the msg object as a JSON-formatted string.
socket.send(JSON.stringify(msg));
}
socket.onopen = onOpen;

这时会触发服务器端的message事件:

 ws.on('message', function incoming(message) {
console.log('received: %s', message);
});

同时,服务器端发来信息的时候:

 ws.send('something');

也会触发客户端的onmessage事件:

 var onMessage = function(data) {
console.log("We get signal:");
console.log(data);
}
socket.onmessage = onMessage;

2.2.3 处理错误

发生的错误会触发onerror事件:

 var onError = function() {
console.log("We got an error.");
}
socket.onerror = onError;

三、Node中的WebSocket

WebSocket在Node中的实现[WebSocket-Node]使我们可以在Nodejs中使用websokcet开发客户端和服务器端实时交互的应用程序。我们可以运行客户端和服务器实时交换随机数的例子看看它是怎么工作的:

启动服务器:

node socketserver.js

[查看源码]

启动客户端:

node socketclient.js

[查看源码]

     

四、socket.io

现在很流行的websocket的实现socket.io同样包括客户端和服务器端两部分。它不仅简化了接口,使得操作更容易,而且对于那些不支持WebSocket的浏览器,会自动降为Ajax连接,最大限度地保证了兼容性。它的目标是统一通信机制,使得所有浏览器和移动设备都可以进行实时通信。

4.1 socket.io与WebSocket的区别在哪里呢? 

websocket是浏览器对象,websocket api是浏览器提供给我们的用于浏览器和服务器实时通信的接口。

websocket在node中的实现使我们可以开发服务端程序时使用websocket的特性。

在我们使用websocket的时候,因为他是浏览器提供的接口,所以会涉及到一些兼容性和支持性的问题。如果我们对程序所运行的环境或局限不是那么了解的化,那么可能会出现问题:

[Differences between socket.io and websocket] 。而socket.io则是进化了的websocket api。socket.io建立在websocket之上,它在合适的时候使用websocket。

 4.2 socket.io实现聊天室

使用websocket或socket.io可以从一个简单的聊天室程序开始。对于socket.io来说,这非常容易。

基于node,这里使用express和socket.io:

 npm install --save express@4.10.2
npm install --save socket.io

那么我们就可以开始写聊天程序了。它需要的就是一个客户端的聊天窗口和一个用来接收消息和分发消息的服务器。

我们需要三个文件,分别新建:package.json,index.js,index.html.

package.json:

 {
"name": "chat-application",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {
"socket.io": "^1.3.5"
}
}

index.js:

 var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http); app.get('/', function(req, res){
res.sendfile('index.html');
}); io.on('connection', function(socket){
console.log('a user connected');
//监听客户端的消息
socket.on('chat message', function(msg){
//用于将消息发送给每个人,包括发送者
io.emit('chat message', msg);
});
socket.on('disconnect', function(){
console.log('user disconnected');
});
}); http.listen(3000, function(){
console.log('listening on *:3000');
});

index.html:

 <!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$('form').submit(function(){
//io.emit提供给我们可以发送给所有人的事件io.emit('some event', { for: 'everyone' });
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>

先运行:

node index.js

在打开两个http://localhost:3000的窗口就可以开始聊天了:

     

[查看源代码]

socket.io官网上有很详细的使用方法和教程:[socket.io doc]

五、扩展阅读

[浏览器对象-WebSocket]

[web通信]

[细说WebSocket]

[WebSocket MDN]

[WebSocket-Node implementation]

[A Guide For WebSocket]

[socket.IO]

[writing websocket client]

[deferences between socket.io and websocket]

[websocket and socketio]

[socket.io application]

借助Nodejs探究WebSocket的更多相关文章

  1. nodejs+mongoose+websocket搭建xxx聊天室

    简介 本文是由nodejs+mongoose+websocket打造的一个即时聊天系统:本来打算开发一个类似于网页QQ类似功能的聊天系统,但是目前只是开发了一个模块功能 --- 类似群聊的,即一对多的 ...

  2. 示例 - 25行代码等价实现 - 借助Nodejs在服务端使用jQuery采集17173游戏排行信息

    今天在园子里看到一篇文章: 借助Nodejs在服务端使用jQuery采集17173游戏排行信息 感觉用SS来实现相同功能更加简洁, 于是写了一下, 发现25行代码就搞定了 (包括自动翻页), 于是跟大 ...

  3. 基于nodejs的websocket通信程序设计

    网络程序设计无疑是nodejs + html最好用 一.nodejs的安装 1.在ubuntu上的安装 sudo apt install nodejs-legacy sudo apt install ...

  4. nodejs与websocket模拟简单的聊天室

    nodejs与websocket模拟简单的聊天室 server.js const http = require('http') const fs = require('fs') var userip ...

  5. nodejs实现Websocket的数据接收发送

    在去年的时候,写过一篇关于websocket的博文:http://www.cnblogs.com/axes/p/3586132.html ,里面主要是借助了nodejs-websocket这个插件,后 ...

  6. Nodejs之WebSocket

    文章导读: 一.概述-what's WebSocket? 二.运行在浏览器中的WebSocket客户端+使用ws模块搭建的简单服务器 三.Node中的WebSocket 四.socket.io 五.扩 ...

  7. 借助node实战WebSocket

    一.WebSocket概述 WebSocket协议,是建立在TCP协议上的,而非HTTP协议. 如下: ws://127.0.0.1或wss://127.0.0.1就是WebSocket请求. 注:w ...

  8. HTML5+NodeJs实现WebSocket即时通讯

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工具外,还有WebSocket也很值得注意.可 ...

  9. 借助Nodejs在服务端使用jQuery采集17173游戏排行信息

    Nodejs相关依赖模块介绍 Nodejs的优势这里就不做介绍啦,这年头相信大家对它也不陌生了.这里主要介绍一下用到的第三方模块. async:js代码中到处都是异步回调,很多时候我们需要做同步处理, ...

随机推荐

  1. 【原】FMDB源码阅读(三)

    [原]FMDB源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 FMDB比较优秀的地方就在于对多线程的处理.所以这一篇主要是研究FMDB的多线程处理的实现.而 ...

  2. [APUE]文件和目录(中)

    一.link.unlink.remove和rename 一个文件可以有多个目录项指向其i节点.使用link函数可以创建一个指向现存文件连接 #include <unistd.h> int ...

  3. JAVA问题集锦Ⅰ

    1.Java的日期添加: import java.util.Date ; date=new date();//取时间 Calendar calendar = new GregorianCalendar ...

  4. Angular企业级开发-AngularJS1.x学习路径

    博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...

  5. 基于ASP.NET/C#开发国外支付平台(Paypal)学习心得。

        最近一直在研究Paypal的支付平台,因为本人之前没有接触过接口这一块,新来一家公司比较不清楚流程就要求开发两个支付平台一个是支付宝(这边就不再这篇文章里面赘述了),但还是花了2-3天的时间通 ...

  6. sql的那些事(一)

    一.概述 书写sql是我们程序猿在开发中必不可少的技能,优秀的sql语句,执行起来吊炸天,性能杠杠的.差劲的sql,不仅使查询效率降低,维护起来也十分不便.一切都是为了性能,一切都是为了业务,你觉得你 ...

  7. 接口--interface

    “interface”(接口)关键字使抽象的概念更深入了一层.我们可将其想象为一个“纯”抽象类.它允许创建者规定一个类的基本形式:方法名.自变量列表以及返回类型,但不规定方法主体.接口也包含了基本数据 ...

  8. 《LoadRunner12七天速成宝典》来了

    看到自己的新书又要发行了,算算从09年第一本书开始,不知不觉已经是第四本书了(帮朋友合写的书不算),每次写完之后都会说太累了,不想再写了,但是却又次次反悔,吞下食言的苦果.如果非要说第四本书的感受,那 ...

  9. Oracle中的commit详解

    本文转自 : http://blog.csdn.net/hzhsan/article/details/9719307 它执行的时候,你不会有什么感觉.commit在数据库编程的时候很常用,当你执行DM ...

  10. 如何查看w3p.exe 和IIS 应用程序池的关系

    图形界面方式 命令行方式 如果找不到 appcmd Appcmd.exe exists at the location %systemroot%\system32\inetsrv\. You eith ...