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

时间 2019-11-12

标签 websocket 一场 web 通信革命悄然来临 node.js node 石头系列之五栏目 HTML 繁體版

原文原文链接

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

从这回开始，咱们来搭建一个简单的聊天室。由于 http 协议是无状态的，搭建聊天室这样的事历来都让人以为疙疙瘩瘩的不是那么瓜熟蒂落。若是不使用 flash、applet 等浏览器插件的话，咱们须要按期轮询服务器来获取你们的聊天信息。这形成了必定的延迟和大量的网络通信。node

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

1、WebSocket 是什么？

在说明 WebSocket 的时候，咱们须要和 HTTP 对比来看，才会发现他的价值。chrome

HTTPnpm	WebSocket浏览器
双向、可是半双工服务器	双向全双工websocket
无状态网络	持续链接app
高延迟	实时，事件驱动
高带宽消耗	低带宽消耗
面向文档设计	文档、二进制都可，客户端不局限于浏览器

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

好了，说下我的的理解，不知道对不对，权当参考：WebSocket 就是经过 http 协议实现握手的 socket 。

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

2、WebSocket 能干什么？

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

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

家庭做业：和你的本我、自我、大我、小我开个头脑风暴会，讨论 WebSocket 对 Web 应用开发的深入影响。

3、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 目录，获得以下结构：

4、仍是先打地基

准备工做完成后，咱们仍是先写一个最最最简的架子，而后测试他。

请看代码：

 
        /* 平安夜快乐之聊天室框架 */ 
       
        //照例先引入模块，此次咱们须要 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 服务正常，火箭即将发射！