移动前端系列——websocket实时互动小游戏

转 移动前端系列——websocket实时互动小游戏

原本是想在写这文章之前，给大家来个二维码，让大家来感受一下我那个狂拽酷炫叼炸天的实时互动小游戏，无奈一直没有找到一台足以hold住其气场的服务器。所以，此处可能需要大家跟随我的描述，脑补一下那高端大气上档次的画面及低调奢华有内涵交互设计：

• 登录界面（此处省略4.33W字）
• 房间列表页（此处省略3.75W字）
• 游戏界面（此处省略5.83W字）

真不是我故意这样的，实在是人类的语言已无法将其形容，过份的修饰描述只怕是有损其光辉闪耀的形象。此时的我，更是怀着对其满满的敬意，忐忑第敲打着键盘，为大家介绍其狂拽酷炫叼炸天是怎样形成的。
从文章的标题上，我们不难看出，这个游戏是基于websocket。那么我就先从websocket的作用以及其优点这两个方面，给大家简单介绍一下websocket：

Websocket的作用

其实websocket的作用，个人感觉可以简单地用一句话来概括：构建实时的Web应用
比如：

• 聊天室/在线客服
• 在线游戏
• 股票走势
• 多屏互动
• ...

在日常的使用web的过程中，这种功能非常常见，比如：新浪微博的WebIM、WebQQ、大智慧网页版等等，我们在处理日常的一些专题中，适当地加入一些多屏互动，也能很好地增加用户的参与度，增强一些现场的互动，如：斗战诛天营救悟空、神秘站等

在websocket出来之前，如果我们想实现上述类型的功能，我们通常采用的是以下几种方式：

• 轮询
• 长轮询
• 长连接
• Flash

我就先通过比较以上几种方式的优缺点，让大家更为清楚地了解websocket牛B之处

轮询

定时向服务器发送请求，服务器响应请求并返回数据

优点：后端服务器不需要特殊设置
缺点：易产生大量无效请求，浪费服务器资源，且消息有延迟
这种轮询的方式，在日常的网页应用中其实应用也比较多，但是只适合一些实时性要求并不是很高的那种应用，比如说微博的新消息提醒，每隔一段向服务器请求，看看是否有新的微博/粉丝/@等

长轮询

客户端向服务器发送Ajax请求，服务器保持该请求不中断，一直等有新的数据（或超时）需要处理才返回响应信息并关闭连接，客户端处理完成后，重新发起ajax请求

PS:两张图找不同的游戏已开始，请注意看右侧服务器端部分的差异

优点：相比轮询，减少了无效请求次数，消息的实时性得到提升
缺点：保持连接同样造成服务器资源浪费
就目前而言，大多数兼容低版本浏览器的聊天室（聊天室貌似基本玩完了）、在线客服，采用的都还是这种方式

长连接

请求一直不中断，服务器端可不断地向客户端输出数据

优点：消息实时，不会产生无效请求
缺点：对服务器开销较大，单向接收数据还成，客户端如果想要提交数据，一样需要断开连接后重新发送请求

Flash

基于socket，服务器可客户端可随时进行双向通信