Socket.io入门引渡 - CSDN博客
Socket.io入门引渡
下面页面就是使用制作的口袋妖怪游戏(默认小屏下已隐藏，请切换到大分辨率查看)。左边是游戏画面，右边是按键表和聊天室。画面达到红蓝版本的水平了。
前导 ——WebSocket的介绍
传统的Web应用采用的是客户端发出请求、服务器端响应的工作方式。在这种情景下，浏览器作为Web应用的前端，自身的处理功能是十分有限的。这种方法不能满足某些应用的实时需求（服务器需要主动更新浏览器端的数据）。不同于服务器端等待HTTP请求，这需要服务器端主动发送数据以给客户端更新。解决方案有两类：一类是基于HTTP的Comet推送技术，另一类是基于套接口(Socket)传送信息实现消息传输。
而目前使用Comet主要有两种方式，轮询和iframe流。
轮询 polling
浏览器周期性的发出请求，如果服务器没有新数据需要发送就返回以空响应。这种方法问题很大：首先，大量无意义的请求造成网络压力；其次，请求周期的限制不能及时地获得最新数据。这种方法很快就被淘汰。
长轮询 long polling
长轮询是在打开一条连接以后保持连接，等待服务器推送来数据再关闭连接。然后浏览器再发出新的请求，这能更好地管理请求数量，也能及时地更新数据。AJAX调用XMLHttpRequest对象发出HTTP请求，JS响应处理函数根据服务器返回的数据更新HTML页面的展示。这个方法一定程度上消除了简单轮询的弊端，但服务器压力也是很大。
iframe流 iframe streaming
iframe流方式是在页面中插入一个隐藏的iframe，利用其src属性在服务器和客户端之间建立一条长链接，服务器向iframe传输数据（通常是HTML，内有负责插入信息的javascript），来实时更新页面。&iframe是很早就存在的一种 HTML 标记，通过在 HTML 页面里嵌入一个隐蔵帧，然后将这个隐蔵帧的 SRC属性设为对一个长连接的请求，服务器端就能源源不断地往客户端输入数据。”其不足为：进度条会显示一直，反应在页面上就是浏览器标签页的图标会不停地转动。（当然这也是有解决方法的）
另一类方法则是基于WebSocket
HTML5提供的Websocket不同于上面这些在老的HTML已有框架内的方法，而是在单个TCP连接上进行全双工通讯的协议。目前主流浏览器都已支持。
1. 初始化过程
不同于早期JAVA使用在浏览器安装插件的方法——-Java Applet 套接口：这种方法不足在于Java Applet再收到服务器返回的消息后，无法通过Javascript去更新HTML页面的内容。而是通过HTTP建立连接(HTTP handshake)。
2. 开始通讯
一旦初始连接建立，浏览器和服务器就打开了一个TCP socket的频道。在这个频道内就能进行双向的数据通信。
然而Websocket依然有一些问题。比如浏览器兼容性问题（随着浏览器的发展，肯定是越来越小的），以及网络中间物(代理服务、防火墙)问题不支持WebSocket，这时Socket.io的出现就是为了完善WebSocket。
Guillermo Rauch在2010年开发第一版时，目的很明确地指向Node.js实时应用。在几次版本更新后，重新定义和封装核心功能而分化出一个基础模块 Engine.io——力求建立更稳定的工具。Engine.IO有着更稳定的连接质量。使得Socket.IO在先打开一个长轮询，再在将连接推至WebSocket频道继续通信。
在使用Node的http模块创建服务器同时还要Express应用，因为这个服务器对象需要同时充当Express服务和Socket.io服务。(如下)
var app = require('express')();
当客户端需要连接服务器时，它需要先建立一个握手。io.处理连接事件，socket 处理断开连接事件。在上面代码里，这套握手机制是完全自动的，我们可以通过也可以io.use()方法来设置这一过程。
客户端使用js调用socket.io的Client API即可。
Socket.IO还要一些系统事件，包括了连接、重连、关闭的事件。我们也可以自定义事件，以及监听方法。
socket.on('customEvent', function(customEventData) {
相应地，在对的时间和地方的调用.emit('customEvent', customEventData); 触发事件就行了。不过，事件是无法在客户端之间发送的。
同一个服务器可以使用namespaces创造不同的Socket连接。Socket.IO使用of()来指定不同的命名空间。
io.of('/someNamespace').on('connection', function(socket){
socket.on('customEvent', function(customEventData) {
服务器端则通过在定义Socket对象时传递namespace参数。
在每一个namespace中又可以使用room来进一步划分，不过sockets是使用join()、leave()来调用。
下面通过书中的例子来实际操作一下。
配置Socket.io服务器&
首先安装安装Socket.IO、connect-mongo、cookie-parser依赖我们先将依赖报引入，然后定义服务器对象。
var http = require('http');
var socketio = require('socket.io');
var app = express();
var server = http.createServer(app);
var io = socketio.listen(server);
配置Socket.io Session&
为了是Socket.io seesion 和Express session一起工作，我们必须让他们信息共享。Express Session 默认是存储在内存，我们需要把它存在mongoDB以便Socket.io能获取。使用connect-mongo来控制session信息的存储，以及使用以前用到过的cookie-parse来解析session cookie信息。
先来修改express.js文件以便connect-mongo能够正常使用。
var mongoStore = new MongoStore({
db: db.connection.db
这样Session就存到数据库中来，新建配置文件socketio.js来配置socketio
var config = require('./config'),
cookieParser = require('cookie-parser'),
passport = require('passport');
cookieParser首先解析Express的Session，然后读取sessionId获得数据库中的session数据，填充到user对象中。如果通过passport来验证用户数据是非法的，则跳出Socket.IO的设置，并发出错误提示。接下来只需要建立Socket.IO的后端控制器即可完成后端的开发。
配置chat控制器&
chat功能的控制器统一监听和触发Socket.IO事件来进行数据通信。通过事件处理的回调函数来控制数据格式的建立和分发。
module.exports = function(io, socket){
确定监听事件规则后，将控制器载入到Socket.IO的连接事件处理函数中即可。
io.on('connection', function(socket){
console.log('a socket is connected');
require('../app/controllers/chat.server.controller')(io, socket);
Angular前端设计&
我们先通过建立ng-resource来封装Socket.IO的方法，再中前端的控制器中调用。
service是懒加载，即只有在请求时才加载。这可以阻止未验证用户调用到service的方法来获得数据，将emit()、on()、removeListenter()一套方法封装成的更相容的服务方法，减少代码的重写。然而ng的数据绑定只有在框架内执行的方法才能实时改变，也就是说第三方事件导致的数据模型的改变是未知的。那么，我们在socket中任何事件被触发时，处理函数对数据的修改可能不会及时地绑定到$scope数据模型上。（这都是抄来的）这里使用$timeout来强制完成数据的绑定。
angular.module('chat').service('Socket', ['Authentication', '$location', '$timeout', function(Authentication, $location, $timeout){
接着在前端控制器中调用这些方法来处理后端触发的事件和触发后端能处理的事件。
将ng引入到对应的视图模板，测试一下即可。
以上就是Socket.IO的上手实战。先了解Socket.IO的工作机制，再将整个数据通信的流程走了一遍，在实践上将Socket.IO与Express、Passport整合到一起完成了Web聊天室的功能，也见识到了Node.JS的小组件大组合的哲学。
References:
本文已收录于以下专栏：
相关文章推荐
socket.io 分为客户端和服务器端服务器端的搭建与引入（index.js）首先，我们来通过express（你已经安装express）构建一个服务器，只需要两行代码！var app = requi...
聊天室入门实战 node.js express socket.io jquery bootstrap 实战聊天室，实现登录检查，群聊，单聊，欢迎，下线通知等功能
socket.io入门实战聊天室的demo，实现了登录，用户名检测，群聊，单聊，图片发送等功能，这个系列博客会分为几章讲解，由浅入深，逐步优化，章节间关联性较大，建议从第一天开始阅读。使用的技术栈有n...
socket.io入门整理
我自己在用socket.io开发，对官方网站上的文档，进行简单的整理，然后自己写了一个简单的聊天程序。
先安装socket.io:
socket.io简述1、基本介绍socket.io是基于websocket技术，实现实时通信功能的技术。简单来说，通过websocket技术，客户端可以和服务器端进行双向实时通信，从而可以实现很多高...
基础理论目前很多网站都用到了实时通讯技术，如websocket、AJAX long polling等等。而前段时间自己为了实现一个消息实时推送功能是也用到了相关技术，最终是使用socket.io这个n...
socket.io基本介绍见我的博客 websocket入门（1）——初识socket.io示例源码见我的github:
/qq/Backgamm...
ket.IO 和 Node.js 入门
Node.js 并不能做所有事情，但它可通过
Socket.IO 库轻松实现
WebSockets。使用 WebSockets 可轻松构建实时多用户的应...
他的最新文章
讲师：吴岸城
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)昨天晚上花了一小时，体验了下快速极限编程，使用nodejs express + socket.io + jquery 制作一个极简单的聊天服务器，socket.io果然对于简单而强大
zengke:mchat$ date
Mon Nov 28 22:46:02 CST 2011
zengke:mchat$ date
Mon Nov 28 23:40:30 CST 2011
服务器端代码 node.js
var express = require('express');
var app = express.createServer();
var io = require('socket.io').listen(app);
app.configure(function () {
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.logger());
app.use(express.bodyParser());
app.use(express.cookieParser());
app.use(express.session({
secret: "skjghskdjfhbqigohqdioukd",
var conns = {};
io.sockets.on('connection', function (socket) {
var cid = socket.
for(var ccid in conns) {
var soc = conns[ccid];
soc.emit('join', {cid: socket.id});
conns[cid] =
socket.on('disconnect', function () {
delete conns[cid];
for(var cid in conns) {
var soc = conns[cid];
soc.emit('quit', {cid: cid});
socket.on('say', function (data) {
data.cid =
for(var ccid in conns) {
var soc = conns[ccid];
soc.emit('broadcast', data);
app.get('/', function (req, res) {
res.sendfile(__dirname + '/public/index.html');
app.use('/public', express.static(__dirname + '/public'));
app.listen(3000);
console.log('daemon start on http://localhost:3000');
浏览器端javascript
var socket = io.connect("http://localhost");
socket.on('quit', function (data) {
status('Client ' + data.cid + ' quits!');
socket.on('join', function (data) {
status('Client ' + data.cid + ' joins!');
socket.on('broadcast', function (data) {
$('#thread').append($('&div&').html('client ' + data.cid + ' says:&br/&' + data.w));
function say() {
var words = $('#text').val();
if($.trim(words)) {
socket.emit('say', {w: words});
$('#text').val('');
function status(w) {
$('#status').html(w);
function initialize() {
$(document).delegate('textarea', 'keydown', function (evt) {
//(evt.keyCode);
if(evt.keyCode == 13 && evt.ctrlKey) {
$('#send').focus().click();
页面HTML代码
&script src="/public/jquery-1.7.min.js"&&/script&
&script src="/socket.io/socket.io.js"&&/script&
&script src="/public/mchat.js"&&/script&
&style type="text/css"&
#content { width: 600 margin: 0 }
textarea { width: 400 height: 40}
$(document).ready(function() {
initialize();
&div id="content"&
&h1&Micro Chat&/h1&
&div id="status"&&/div&
&div id="thread"&
&textarea id="text" name="text"&&/textarea&
&button id="send" onclick="say();"&Send&/button&
superisaac
浏览: 37984 次
来自: 北京
不知道你是在哪定义的，急啊。希望能解答我啊。谢谢！
你好，能说明一下data.cid
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'SOCKETIO（8）
WEBSOCKET（11）
NODEJS/GRUNT（19）
原文：/xiezhengcai/p/3957314.html
要理解socket.io ，不得不谈谈websocket
在html5之前，因为http协议是无状态的，要实现浏览器与服务器的实时通讯，如果不使用 flash、applet 等浏览器插件的话，就需要定期轮询服务器来获取信息。这造成了一定的延迟和大量的网络通讯。随着HTML5 的出现，这一情况有望彻底改观，它就是 WebSocket 。理论上，Socket能干的事Websocket都能完成，这与需要实现与服务器实时通信的应用来说，如从羊肠小道进入了高速公路。那么，使用Websocket我们要做些什么呢？
首先，我们得先看看websocket的工作机制
工作流程：
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。因为 WebSocket 连接本质上就是一个 TCP 连接，所以在数据传输的稳定性和数据传输量的大小方面，和传统轮询以技术比较，具有很大的性能优势。
为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息”Upgrade: WebSocket”表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
协议规范：
一个典型的websocket发起请求到响应请求的例子如下
客户端到服务端：
GET / HTTP/1.1
Connection:Upgrade
Host:127.0.0.1:8088
Origin:null
Sec-WebSocket-Extensions:x-webkit-deflate-frame
Sec-WebSocket-Key:puVOuWb7rel6z2AVZBKnfw==
Sec-WebSocket-Version:13
Upgrade:websocket
服务端到客户端：
HTTP/1.1 101 Switching Protocols
Connection:Upgrade
Server:beetle websocket server
Upgrade:WebSocket
Date:Mon, 26 Nov 2013 23:42:44 GMT
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:content-type
Sec-WebSocket-Accept:FCKgUr8c7OsDsLFeJTWrJw6WO8Q=
这是一个握手的http请求，它与普通的http请求有一些区别，首先请求和响应的，”Upgrade:WebSocket”表示请求的目的就是要将客户端和服务器端的通讯协议从 HTTP 协议升级到 WebSocket 协议。从客户端到服务器端请求的信息里包含有”Sec-WebSocket-Extensions”、“Sec-WebSocket-Key”这样的头信息。这是客户端浏览器需要向服务器端提供的握手信息，服务器端解析这些头信息，并在握手的过程中依据这些信息生成一个
28 位的安全密钥并返回给客户端，以表明服务器端获取了客户端的请求，同意创建 WebSocket 连接。
当握手成功后，这个时候tcp连接已在经建立了，客户发送上来的时候就是纯纯的数据了。不过服务端要判断什么时候是一次数据请求的开始，什么时候是请求的结束。在websocket中，由于浏览端和服务端已经打好招呼，如我发送的内容为utf-8 编码，如果我发送0x00,表示包的开始，如果发送了0xFF，就表示包的结束了。这就解决了黏包的问题。
从握手的协议可以看出，如果我们要使用Websocket，我们需要一个实现Websocket协议规范的服务器，这不在我们讨论的范围。
值得一提的是：websocket是可以和http共用监听端口的，也就是它可以公用端口完成socket任务。
主角终于上场了，听了上面对Websocket的介绍之后，你是不是想，socket.io就是对Websocket的封装呢，并且实现了Websocket的服务端代码。不错，但是不完全正确。刚才我们说到，在WebSocket没有出现之前，实现与服务端的实时通讯可以通过轮询来完成任务.。Socket.io将Websocket和轮询（Polling）机制以及其它的实时通信方式封装成了通用的接口，并且在服务端实现了这些实时机制的相应代码。也就是说，Websocket仅仅是Socket.io实现实时通信的一个子集。
那么，Socket.io都实现了Polling中的那些通信机制呢？
Adobe(R) Flash(R) SocketAJAX long pollingAJAX multipart streamingForever IframeJSONP Polling
Adobe(R) Flash(R) Socket 大部分PC浏览器都支持的socket模式，不过是通过第三方嵌入到浏览器，不在W3C规范内，所以可能将逐步被淘汰，况且，大部分的手机浏览器都不支持这种模式。
AJAX long polling 这个很好理解，所有浏览器都支持这种方式，就是定时的向服务器发送请求，缺点是会给服务器带来压力并且出现信息更新不及时的现象。
AJAX multipart streaming &这是在XMLHttpRequest对象上使用某些浏览器（比如说Firefox）支持的multi-part标志。Ajax请求被发送给服务器端并保持打开状态（挂起状态），每次需要向客户端发送信息，就寻找一个挂起的的http请求响应给客户端，并且所有的响应都会通过统一连接来写入
var xhr = $.ajaxSettings.xhr();
xhr.multipart =true;
xhr.open('GET', 'ajax', true);
xhr.onreadystatechange = function() {
　　if (xhr.readyState == 4) {
　　　　processEvents($.parseJSON(xhr.responseText));
xhr.send(null);
Forever Iframe&（永存的Iframe）技术涉及了一个置于页面中的隐藏Iframe标签，该标签的src属性指向返回服务器端事件的servlet路径。每次在事件到达时，servlet写入并刷新一个新的script标签，该标签内部带有JavaScript代码，iframe的内容被附加上这一script标签，标签中的内容就会得到执行。这种方式的缺点是接和数据都是由浏览器通过HTML标签来处理的，因此你没有办法知道连接何时在哪一端已被断开了，并且Iframe标签在浏览器中将被逐步取消使用。
JSONP Polling &JSONP轮询基本上与HTTP轮询一样，不同之处则是JSONP可以发出跨域请求，详细请搜索查询jsonp的内容。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：7900038次
积分：67672
积分：67672
排名：第28名
原创：254篇
转载：2719篇
评论：717条
(22)(73)(46)(92)(17)(25)(37)(63)(7)(74)(67)(95)(177)(113)(86)(40)(43)(71)(14)(10)(17)(12)(6)(20)(27)(54)(71)(97)(74)(32)(2)(24)(21)(62)(60)(36)(23)(27)(46)(34)(76)(63)(121)(141)(74)(54)(120)(77)(42)(4)(12)(19)(1)(9)(15)(19)(18)(16)(31)(79)(68)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'}