五、TJS优化前传——socket.io引⼊详解
在《闪电提速》的博客中我提到了⽤socket.io 替换原来的连接⽅式，本章就如何引⼊socket.io的细节做进⼀步阐述。
主要的内容如下：
1、WebSocket 简介
2、为什么要⽤socket.io
3、如何⽤socket.io
websocket和socket4、后续安排
⼀、WebSocket简介
如果您对websocket协议不太熟悉，可以通过这两个链接先了解⼀下。
WebSocket详解（⼀）：初步认识WebSocket技术
WebSocket 是什么原理？为什么可以实现持久连接？
我简单提⼀些吧。Ajax之所以重要，从本质来说，它避免了许多原本需要在Web应⽤中处理的数据传递和渲染开销。但它有⼀个先天的缺陷，就是⽆法控制服务器端接受请求的先后顺序！同时，在TCP传输信息时，信息头的数据量有时远远超过了真正要发送的数据量。
HTML5给我们⼀个解决⽅案，就是WebSocket！WebSocket是web下的TCP，⼀个底层双向的socket，容许⽤户对信息传递进⾏控制。
WebSocket是建⽴在HTML协议之上，但它和HTML的区别是，在握⼿之后，客户端和服务器就建⽴了类似TCP Socket通道，为了更好地理解，看下⾯的图⽰:
http与webSocket的握⼿差异
node.js实现WebSocket的demo很多，如果有时间，可以简单搜⼀下。不看也没什么⼤不了的，记住塔哥这句话，websocket就是个双向数据通道，看懂下⼀章没问题的。
⼆、为什么要⽤socket.io
WebSocket有它诱⼈的⼀⾯，但现实中浏览器的使⽤情况给前端开发带来巨⼤的难题。塔哥写了好多年C++，只要动态库的依赖关系整明⽩了，⼏乎所有的windows系统都没问题，但在前端开发中就没那么幸运了。
⽯墨⽂档
好了，我的铺垫也不少了，该回答为什么我在together.js中引⼊socket.io：
因为使⽤socket.io后，这个协同产品能在更多的平台下运⾏；
Socket.IO在git上有4K多个Star，运⾏稳定、⽂档齐全；
三、怎么引⼊socket.IO
打铁还需⾃⾝硬，多见识多练，坑踩多了，闯江湖就没什么可怕的了。这⼀章我写之前还是犹豫过的，因为socket.IO我也是第⼀次⽤，写不好露
怯是⼩事，主要还是怕把您给耽误了。后来觉得，还是写吧，写的过程也是⼀个成长的过程。还是那句话，如果有不妥的地⽅，还望您指证。我先⾏谢过 ：）
引⼊socket.IO的⼯作我分两部分介绍，先服务端再客户端。
3.1 TJS的服务器端改造
together.js 的服务器端代码是在hub⽬录下，它实现了：
· websocket的创建与⽣命周期管理；
· 状态维护与消息的派发；
写的怎么说呢，也许是我始终没理解作者的思路，端详好⼏回也不知道从哪下⼿，⼲脆重新写吧。所以说，在优化的过程中，websocket的服务器端代码我放在了“devserver.js”⾥，node直接启动，抛弃了原有hub/server.js。
主要内容是：
tjs优化后，socketIO需要肩负的职责
3.2 TJS的客户端改造
客户端引⼊socket.io就容易多了，还是以Tinymce这个demo来说，下图就是index.html中引⼊socket.io.js的⽅法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。