WebSocket 一场Web 通讯革命悄然来临——Node.js摸石头系列之五

转自: http://www.cnblogs.com/hsxixi/archive/2011/12/24/2300641.html

从这回开始,我们来搭建一个简单的聊天室。因为 http 协议是无状态的,搭建聊天室这样的事从来都让人觉得疙疙瘩瘩的不是那么顺理成章。如果不使用 flash、applet 等浏览器插件的话,我们需要定期轮询服务器来获取大家的聊天信息。这造成了一定的延迟和大量的网络通讯。

不过,随着 HTML5 的浮出水面,这一情况有望彻底改观了。在 HTML5 的众多特性中,有一个总是悄悄站在幕后的大哥级人物,他就是 WebSocket 。WebSocket 实在是太强大了,Firefox 浏览器在支持一段时间后,觉得实在不能保证这位大哥不会干出点什么出格的事,把他打入冷宫。可是正如毛遂说的,钉子放在口袋里,迟早都会冒出头的。现在最新版的 Chrome 、 Firefox  均支持 WebSocket ,还有 IE 10 据说也将支持。

一、WebSocket 是什么?

在说明 WebSocket 的时候,我们需要和 HTTP 对比来看,才会发现他的价值。


HTTP


WebSocket


双向、但是半双工


双向全双工


无状态


持续连接


高延迟


实时,事件驱动


高带宽消耗


低带宽消耗


面向文档设计


文档、二进制均可,客户端不局限于浏览器

好了,比也比完了,如果你还有点迷糊的话,哎,那我辛苦点,打个比方好了。我们把服务器比做一位美丽的公主,我们就是那苦命的追求者,之一。 http 时代:我们写了一封信(request),交给书童,快,送信去,路上别偷懒。书童到了公主的宫殿,在门口被拦了下来,交出路条(request headers),哦,进去吧。还好,公主对我们也还算热情,很快写好了信(response),放进信封,贴上标签(response headers) ,交给书童。书童再屁颠屁颠跑回来交给我们。随着我们和公主感情的不断升温,我们开始豢养一群名叫阿贾克斯的信鸽,这样,就可以很快地把我们写的小诗小词送给公主了。公主如果想我们的时候,也可以在有信鸽来的时候,把她的手帕啊什么的栓在鸽子腿上给我们捎回来。HTML5 时代来了,我们和公主的关系也开始如胶似漆起来,光靠信件和便签已经不能满足了,还好,我们有 WebSocket ,只要我们让书童送去一封信,WebSocket 就会来在我们和公主之间架起一条电话热线,这样公主说话您立刻就能听见,您说话公主也立刻能听见,当然,因为这条热线是双向全双工的,你们还可以一起合唱一首小情歌。

好了,说下个人的理解,不知道对不对,权当参考:WebSocket 就是通过 http 协议实现握手的 socket 。

下面是摘自 Kaazing  《WebSocket –The Web Communication Revolution 》 中的一副图:

二、WebSocket 能干什么?

理论上,socket 能干什么,他就能干什么。

这个问号的答案是无限的,我们看看这个在线版的 Quake 游戏吧,也许他能点亮我们的大脑。

家庭作业:和你的本我、自我、大我、小我开个头脑风暴会,讨论 WebSocket 对 Web 应用开发的深刻影响。

三、WebSocket 协议与 Socket.IO 模块

WebSocket 规范由客户端和服务器端规范分别组成。客户端由 W3C 制订,服务器端规范由 IETF 制订。Node.js 的第三方模块 Socket.IO 提供在 Node.js 上使用 WebSocket 协议的能力。

说得已经够多了,下面动手了。

建一个项目文件夹,这里我用 chatroom 好了,您自便。打开命令行窗口,移步到 chatroom 目录下,键入如下命令:

D:\chatroom> npm install socket.io –d

见图:(-d 参数可以使我们能够观察到安装的详细情况,但有资料说 –d 是安装齐所有依赖包,不管了,加上总比不加好,是吧?)

如果最后出现“ npm info ok   ”,恭喜你,socket.io 模块安装成功。查看 chatroom 目录,得到如下结构:

四、还是先打地基

准备工作完成后,我们还是先写一个最最最简的架子,然后测试他。

请看代码:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

/* 平安夜快乐之聊天室框架 */

//照例先引入模块,这次我们需要 http 和 socket.io 两个

var http = require(‘http‘),

    socketio = require(‘socket.io‘);

    

//注意,和前面的区别是我们需要拿到 http 创建的服务器实例

var app = http.createServer(function(request,response){

    //TODO 后面我们会在这把聊天室页面发回去,不过现在我们简单地提示就好了。

    response.end(‘Server ok.‘);

}) ;

//http 服务开始侦听

app.listen(888);

console.log("Http Server start at 888");

// socket.io 开始侦听

var io = socketio.listen(app);

// WebSocket 协议握手成功

io.sockets.on(‘connection‘,function(socket) {

    console.log("Websocket connect ok ...");

});

保持为 app.js 文件。运行。

D:\chatroom> node app.js

如果见到如下图,那么恭喜你,WebSocket 已经准备好来为我们的聊天室服务了。

看提示第一行是我们输出的说明 http 服务启动的信息,第二行是 Node.js ,或者准确地说是 Socket.IO 给我们的提示信息,真体贴啊。听是在听了,那么他们有没有谎报军情呢?试试看就知道了。

请打开浏览器,等等,什么浏览器都可以吗?你不是说只有 chrome 和 火狐? 呃,差点忘了,Socket.IO 不仅帮助我们实现了 WebSocket 协议,还帮助我们提高了浏览器的兼容性,现在已经支持 IE5+、Safari 3+、 Chrome 4+、火狐 3+、Opera 10.61+,还支持一些手机和平板上得浏览器。

  • 请在地址栏键入:

http://localhost:888/socket.io/socket.io.js

观察控制台和浏览器,你会发现控制台提示你: debug – served static content /socket.io.js ,而浏览器我们也得到了一段,不,一大段 js 代码,这说明我们的任务完成了。 Http 服务正常,WebSocket 服务正常,火箭即将发射!

时间: 2024-11-08 11:05:27

WebSocket 一场Web 通讯革命悄然来临——Node.js摸石头系列之五的相关文章

高性能Web服务端 PHP vs Node.js vs Nginx-Lua 的对比分析

1. ngx_lua nodejs php 比较 我在研究一阵子ngx_lua之后发现lua语法和js真的很像,同时ngx_lua模型也是单线程的异步的事件驱动的,工作原理和nodejs相同,代码甚至比nodejs的异步回调更好写一些. 性能测试,100并发php:17400nodejs:31197ngx_lua:32628 单纯做http代理服务器加上一些简单的逻辑,似乎ngx_lua的方案更加合适. 引自: PHP vs Node.js vs Nginx-Lua 以下是从占用的资源上来分析:

HTML5 WebSocket:下一次Web通信革命揭幕

让我们一起来了解HTML 5对当前Web通信的改变.HTML 5 Web Socket通过在Web上的一个单一Socket定义了一个全双工通信信道为Web通信带来了显著的改善. [51CTO译文]关于HTML 5的各种前沿技术应用51CTO已经报道过很多,比如HTML 5的视频音频元素.HTML 5 Web SQL Database.HTML5 File API以及如何从零开始构建一个HTML 5页面等等.这些都是HTML 5对当前Web开发标准技术的升级或扩展.今天,51CTO带您了解HTML

web前端课程技术总结Node.js 使用方法及相关方法分析

Node.js 使用方法及相关方法分析 首先我们要了解什么是node.js? 官方解释是:node.js是一个基于Chrome v8引擎的javascript 运行环境.Node.js使用了一个事件驱动.非阻塞式 I/O的模型,使其轻量又高效.他是由c++编写的 所以速度很快 简单来说 就是一个js 的运行环境,所以他开发用的语言是js语言 ,通过node去编译你的js文件 node.js 的安装 1)npm i -g 全局(电脑只需安装一次) 2)npm i --save -dev /-D/(

细说WebSocket -- Node.js篇

在上一篇提高到了 web 通信的各种方式,包括 轮询.长连接 以及各种 HTML5 中提到的手段.本文将详细描述 WebSocket协议 在 web通讯 中的实现. 一.WebSocket 协议 1. 概述 websocket协议允许不受信用的客户端代码在可控的网络环境中控制远程主机.该协议包含一个握手和一个基本消息分帧.分层通过TCP.简单点说,通过握手应答之后,建立安全的信息管道,这种方式明显优于前文所说的基于 XMLHttpRequest 的 iframe 数据流和长轮询.该协议包括两个方

《Node.js入门》Windows 7下Node.js Web开发环境搭建笔记

近期想尝试一下在IBM Bluemix上使用Node.js创建Web应用程序.所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是Windows下的搭建方法,使用CentOS 的小伙伴请參考:<Node.js入门>CentOS 6.5下Node.js Web开发环境搭建笔记 Node.js是什么? 我们看看百科里怎么说的? JavaScript是一种执行在浏览器的脚本,它简单,轻巧.易于编辑,这样的脚本通经常使用于浏览器的前端编程.可是一位开发人员Ryan有一天发现这样的前端式

node.js实现WebSocket

最近在学习“HTML5游戏开发实战”,其中第8章内容是使用WebSocket来构建多人游戏---<你画我猜>.然而在实现过程中,却一直出错: 客户端请求时,服务器端会报错并终止: 而浏览器端也会出错: 服务器代码: var ws = require(__dirname + '\\lib\\ws\\server'); var server = ws.createServer(); server.addListener("connection",function(conn){

Node.js 的Web server--Fenix

Fenix 是提供给开发者使用的简单的一个 Web server, 是基于 Node.js 开发. 能够同一时候在上面执行非常多的项目. 最适合前端开发者使用. 能够通过免费的 Node.js 控制台创建,停止,启动和共享 Fexix server. 您能够通过把你的桌面变成一个公共的 Web server,让大家能看到你的web服务. Fenix官方

Express 4.x Node.js的Web框架----《转载》

本文使用node.js v0.10.28 + express 4.2.0 1 Express概述 Express 是一个简洁而灵活的node.js的MVC Web应用框架,提供一系列强大特性创建各种Web应用. Express 不对 node.js 已有的特性进行二次抽象,我们只是在它之上扩展了Web应用所需的功能. Expressd底层由Node.js的HTTP模块实现. 1.1 express 4.x 安装 express 4.x与之前的版本有了许多的变化,书里和网上的很多方法都不再适用.学

在 Web 应用中创建 Node.js 应用程序

本分步指南将通过 Azure Web 应用帮助您启动并运行示例 Node.JS 应用程序.除 Node.JS 外,Azure Web 应用还支持其他语言,如 PHP..NET.Node.JS.Python.Ruby 等,本教程重点介绍了 Java(其他语言将遵循同样的流程).在本教程中完成的所有操作均符合 1元试用条件. 开始之前 运行本示例之前,请在本地安装以下必备组件: 下载并安装 git 下载并安装 Node.js 和 NPM 下载并安装 Azure CLI 2.0 如果没有 Azure