本地连接在哪里 wifi怎么办理和安装( 二 )

<div class= "container chat-container">
<divclass="row"></div><divclass="row"><divclass="col-md-6 col-md-offset-3 col-sm-12 historyMsg"id="historyMsg"></div></div><divclass="row"><divclass="col-md-6 col-md-offset-3 col-sm-12 control"><divclass="row control-row"></div></div></div><divid="loginWrapper"class="loginWrapper"></div></div>
直接看注释，就能清晰的看到这只小麻雀的“心”、“肝”、“脾”、“肺”四个部分。（“肾”呢？哼，你以为我的新手机怎么来的？）至于那些辣眼睛的类名，是因为项目里用到了 Bootstrap，也算是偷了个懒。
前端逻辑
UI搞定之后，思考一下这个聊天室的交互是怎么实现的。
“你前面不是说了，用 websocket 嘛。”
此话不假，不过这里我指的是交互，毕竟你写一个程序的话，对程序内的逻辑必须做到“吹毛求疵”（我这个成语用对了没:no_mouth:）
与服务端建立连接
输入昵称完成登录
发送消息
接受消息
与服务端建立连接
输入昵称完成登录
发送消息
接受消息
仔细想想好像大概就这么多了，那就开始逐一攻破:rocket:
与服务端建立连接
这里要注意，因为是一个聊天系统，所以与服务端建立连接的方式不同于往常，这里用到的协议是HTTPWebSocket，从而实现持久连接。
简单的解释一下，这里的“持久”，是相对于HTTP这种“非持久”的协议来说的（阁下的意思是，HTTP 的夫人会很羡慕 WebSocket 的夫人咯）。
通过阅读 Ovear 在知乎上的回答，大致说一下这两个协议之间的区别。
HTTP
HTTP 的生命周期大概是这样的，一个 request，一个 response，这次请求就结束了；HTTP 1.1 中进行了改进，增加了一个 keep-alive，效果是在这次 HTTP 连接中，可以发送多个 request，接受多个 response，但本质上，request = response，也就是说，请求和响应永远是一一对应的，没有 request 时，服务端不能主动 response 。
WebSocket
当客户端与服务端完成协议升级以后（HTTP -> WebSocket），就建立了一个持久连接，有多持久呢？这个连接可以持续存在知道客户端或服务端某一方主动的关闭连接。与 HTTP 最大的不同是，此时的服务端可以主动推送消息给客户端咯。在这个项目中，我们用socket.io这个包模块来实现 WebSocket，socket.io 不仅实现了对 WebSocket 的封装，还将连同 Ajax 轮询和其他实时通信方式封装成了通用的接口，这么做的原因是，当服务器不支持 WebSocket 时，可以转换为其他的实现方式，啧啧啧，堪称纵享丝滑
接下来就是实现的部分，前端在引入了 socket.io.js 这个文件以后应该怎么做呢？
Talk is cheap, show you the CODE.
varsocket = io.connect();
对，就是这么简单，不信你去看官方文档。
输入昵称完成登录
这里的“登录”，不是真正的登录，当执行完io.connect()之后，这个连接就算已经建立了，这里是在处理一些交互上的行为。
在前端监听一个 connect 事件，这个事件的触发条件是：成功和服务端建立连接。
socket.on( 'connect', function(){
//do something
});
回调里面是此时要完成的DOM操作，比如：
改变提示文字（初始是“Connecting to server……”）
显示遮盖层
聚焦文本框
当用户输入自己的昵称点击登录按钮后，当前 socket 触发一个 login 事件到服务端：
socket.emit( 'login',nickname);
携带一个参数，这个参数就是用户输入的昵称。