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 一場Web 通訊革命悄然來臨——Node.js摸石頭系列之五

二、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 是安装齐所有依赖包,不管了,加上总比不加好,是吧?)

 

WebSocket 一場Web 通訊革命悄然來臨——Node.js摸石頭系列之五

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

WebSocket 一場Web 通訊革命悄然來臨——Node.js摸石頭系列之五

四、还是先打地基

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

    请看代码:

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();
console.log("Http Server start at ");
 
// 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 已经准备好来为我们的聊天室服务了。

WebSocket 一場Web 通訊革命悄然來臨——Node.js摸石頭系列之五

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

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

  •    请在地址栏键入:

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

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

 

更多相关文章
  • 


    		    Hook MSN Messenger之socket通訊的鳥事
    Hook MSN Messenger之socket通訊的鳥事 如果要問我這幾天怎麼都沒寫blog,那除了正在搞DirectShow的心得分享外,卡在另一個API hooking上的問題,肯定是主因了. 這問題是怎樣的呢?話說我用API hooking的方式,試著掛上winsock API中的函式-r ...
  •   概述 传统的网页都是浏览器向服务器“查询”数据,但是很多场合,最有效的方式是服务器向浏览器“发送”数据.比如,每当收到新的电子邮件,服务器就向浏览器发送一个“通知”,这要比浏览器按时向服务器查询(polling)更有效率. 服务器发送事件(Server-Sent Events,简称SSE)就是为
  • 基于Node.js+socket.IO創建的Web聊天室
    这段时间进了一个新的项目组,项目是用Appcan来做一个跨平台的移动运维系统,其中前台和后台之间本来是打算用WebSocket来实现的,但写好了示例后发现android不支持WebSocket,大为受挫.后在园子里看到用socket.io可以代替WebSocket,然而对于我这样JS都没学全的来说有
  • (轉)使用Node.js+Socket.IO搭建WebSocket及時應用
    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. WebSocket简介 谈到Web实时推送,就不得不说WebSocket.在WebSocket出现之前 ...
  • 几乎搞了一个工作日的时间,查找了很多的资料,学习,调试,最终终于把利用web socket方法,在node.js作为服务器的情况下,实现了client端与server端的交互,没辦法,学习的过程就是这样,经历过痛苦之后,才能永生~~ 虽然web socket这项技术早已经出来了,国外大概在10年就有
  • Node.js + Web Socket 打造即時聊天程序嗨聊
    前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新
  • 了不起的Node.js: 將JavaScript進行到底(Web開發首選,及時,跨多伺服器,高並發)
    了不起的Node.js: 将JavaScript进行到底(Web开发首选,实时,跨多服务器
  • node.js 創建第一個web應用
    安装node.js   从http://nodejs.org/ 下载安装程序进行安装. 安
一周排行
  • 元组是关系数据库中的基本概念,关系是一张表,表中的每行(即数据库中的每条记录)就是一个元组,每列就是一个属性.  在二维表里,元组也称为记录.
  • 一:css3属性选择器: img[alt]{ border:2px dashed #; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签.   还可以通过设定属性值来缩小匹配范围:如下代码: img[a ...
  • openCV1
    openCV是一个提供有C++ , android , python的开源图像处理的类库
  • Problem Description 输入n(n<100)个数,找出其中最小的数,将它与最前面的数交换后输出这些数.   Input 输入数据有多组,每组占一行,每行的开始是一个整数n,表示这个测试实例的数值 ...
  • 


    		    PortICASetDefaults.exe /o命令返回爲空
    PortICASetDefaults.exe /o Command is Blank or ...
  • --字符串函数- --ASCII 返回字符串的首字母的ASCII编码 select ASCII('w') select ASCII('a') select ASCII('s') select ASCII('d') s ...
  • apxs是一个为Apache HTTP服务器编译和安装扩展模块的工具,用于编译一个或多个源程序或目标代码文件为动态共享对象,使之可以用LoadModule指令在运行时加载到Apache服务器中. 1. 进入apach
  • 官方下载地址: Eclipse 标准版 x86 http://mirror.hust.edu.cn/eclipse//technology/epp/downloads/release/luna/R/eclipse-s
  • 1.下载Axis,将Axis下的文件目录拷贝到项目的WEB-INFO下,需注意activation.jar.axis.jar和mail.jar这三个jar包也要复制到lib下: 2.在web.xml中添加Axis的s ...
  • 2011.04.12 by bibodeng how many roads a man must go down 一个人到底要走多少路? 当我一岁多的时候学会了走路,不知道摔了多少多少次. 我至今还清晰的记得我四岁时