即时通讯之Socket.IO的学习，及使用nodejs 搭建websocket 聊天室

来源：互联网发布：爱家呐软件多少钱编辑：程序博客网时间：2024/05/29 19:10

以下转自标点符即时通讯之Socket.IO的学习:

Web领域的实时推送技术，也被称作Realtime技术。这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新。它有着广泛的应用场景，比如在线聊天室、在线客服系统、评论系统、WebIM等。

WebSocket简介

谈到Web实时推送，就不得不说WebSocket。在WebSocket出现之前，很多网站为了实现实时推送技术，通常采用的方案是轮询(Polling)和Comet技术，Comet又可细分为两种实现方式，一种是长轮询机制，一种称为流技术，这两种方式实际上是对轮询技术的改进，这些方案带来很明显的缺点，需要由浏览器对服务器发出HTTP request，大量消耗服务器带宽和资源。面对这种状况，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并实现真正意义上的实时推送。

WebSocket协议本质上是一个基于TCP的协议，它由通信协议和编程API组成，WebSocket能够在浏览器和服务器之间建立双向连接，以基于事件的方式，赋予浏览器实时通信能力。既然是双向通信，就意味着服务器端和客户端可以同时发送并响应请求，而不再像HTTP的请求和响应。

为了建立一个WebSocket连接，客户端浏览器首先要向服务器发起一个HTTP请求，这个请求和通常的HTTP请求不同，包含了一些附加头信息，其中附加头信息”Upgrade: WebSocket”表明这是一个申请协议升级的HTTP请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的WebSocket连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

前面讲到WebSocket是HTML5中新增的一种通信协议，这意味着一部分老版本浏览器（主要是IE10以下版本）并不具备这个功能，通过百度统计的公开数据显示，IE8目前仍以33%的市场份额占据榜首，好在chrome浏览器市场份额逐年上升，现在以超过26%的市场份额位居第二，同时微软前不久宣布停止对IE6的技术支持并提示用户更新到新版本浏览器，这个曾经让无数前端工程师为之头疼的浏览器有望退出历史舞台，再加上几乎所有的智能手机浏览器都支持HTML5，所以使得WebSocket的实战意义大增，但是无论如何，我们实际的项目中，仍然要考虑低版本浏览器的兼容方案：在支持WebSocket的浏览器中采用新技术，而在不支持WebSocket的浏览器里启用Comet来接收发送消息。

Socket.IO 简介

Socket.IO是一个完全由JavaScript实现、基于Node.js、支持WebSocket的协议用于实时通信、跨平台的开源框架，它包括了客户端的JavaScript和服务器端的Node.js。是一个为实时应用提供跨平台实时通信的库。socket.io 旨在使实时应用在每个浏览器和移动设备上成为可能，模糊不同的传输机制之间的差异。socket.io的名字源于它使用了浏览器支持并采用的HTML5 WebSocket 标准，因为并不是所有的浏览器都支持 WebSocket ，所以该库支持一系列降级功能：

Websocket
Adobe® Flash® Socket
AJAX long polling
AJAX multipart streaming
Forever Iframe
JSONP Polling

在大部分情境下，你都能通过这些功能选择与浏览器保持类似长连接的功能。

Socket.IO设计的目标是构建能够在不同浏览器和移动设备上良好运行的实时应用，如实时分析系统、二进制流数据处理应用、在线聊天室、在线客服系统、评论系统、WebIM等。Socket.IO已经具有众多强大功能的模块和扩展API，如（session.socket.io)（http session中间件，进行session相关操作）、socket.io-cookie（cookie解析中间件）、session-web-sockets（以安全的方式传递Session）、socket-logger（JSON格式的记录日志工具）、websocket.MQ（可靠的消息队列）、socket.io-mongo（使用MongoDB的适配器）、socket.io-redis（Redis的适配器）、socket.io-parser（服务端和客户端通讯的默认协议实现模块）等。

Socket.IO实现了实时、双向、基于事件的通讯机制,它解决了实时的通信问题，并统一了服务端与客户端的编程方式。启动了Socket以后，就像建立了一条客户端与服务端的管道，两边可以互通有无。它还能够和Express.js提供的传统请求方式很好的结合，即可以在同一个域名，同一个端口提供两种连接方式：request/response, websocket(flashsocket,ajax…).

==========================================================================

华丽分割线，以下为自己参考网上代码实现的一个简易web聊天室：

web端以浏览器为载体实现聊天室基本界面

<!doctype html><html><head>    <meta charset="utf-8">    <style type="text/css" rel="stylesheet">    li{list-style:none;border-bottom:1px dashed #ccc;padding:5px 0}    </style></head><body style="margin:0;padding:20px"><div id="voice-box">    <div id="chat-box" style="padding:8px;border:1px solid #cccccc;height:300px;overflow:scroll;"></div>    <textarea value="" id="talk" tabindex="1" style="padding:8px;width:100%;height:100px;display:bolock">请输入。。。</textarea>    <p>    <input type="button" id="send" tabindex="2" value="发送"/>    </p></div><script type="text/javascript">    var host = '10.**.**.4';    var port = 8092;    var url = 'ws://'+host+':'+port+'/';    var w = new WebSocket(url);    var audioElement = document.createElement('audio');    function $(id){        return document.getElementById(id);    }    function send(){        var talk = $('talk');        var chatBox = $('chat-box');        setTimeout(function(){            w.send('<li><strong style="color:blue">他：</strong>'+talk.value+'</li>');        },500);        chatBox.innerHTML = chatBox.innerHTML+'<li><strong style="color:red">我：</strong>'+talk.value+'</li>';        talk.innerHTML = '';    }    audioElement.setAttribute('src', 'http://s4.qhimg.com/static/762a9ab3343a7394/4083.mp3');    w.onopen = function(){        $('chat-box').innerHTML = '已连接到服务器......<br/>';    }    w.onmessage = function(e){        var msg = e.data;        var chatBox = $('chat-box');        audioElement.play();        chatBox.innerHTML = chatBox.innerHTML+msg;    }    $('send').onclick=function(){send();}    $('talk').onfocus=function(){this.innerHTML = this.value = ''}    document.onkeydown=function(event){        var event = window.event || event;        if(event.keyCode == 13){            send();        }    }</script></body></html>

服务端以nodejs启动websocket服务

var WebSocketServer = require('ws').Server, wss = new WebSocketServer({port: 8092});                                                                          var userlist = [];                                                                                                                                            wss.on('request', function(ws) {                                                                                                                                  ws.send('又一个小伙伴加入了');                                                                                                                            })                                                                                                                                                            wss.on('connection', function(ws) {                                                                                                                                                              userlist.push(ws);                                                                                                                                            ws.on('message', function(msg) {                                                                                                                                  for(var i=0; i<userlist.length; i++){                                                                                                                             if(userlist[i]!=ws){                                                                                                                                              userlist[i].send(msg);                                                                                                                                    }                                                                                                                                                         }                                                                                                                                                         });                                                                                                                                                       });

自此一个简易web聊天室搭建完毕，本事例只通过chrome开发测试，其它浏览器未知，仅供参考学习。

聊天界面如图：

0 0