百度前端面试题－类似slack的在线聊天室

别人国庆出去玩，我在家写代码的感觉也是很不错哒。

首先介绍一下技术架构吧！

• 使用了js框架：FFF，zepto，jquery，md5.min.js
• 前端框架：Bootstrap
• 后端：野狗，部分PHP

github地址：https://github.com/knowThis/fex-stack.git

官网地址：http://chatroom.zhouxianbao.cn/

制作这个聊天室的时候考虑的第一个问题，是如何保证实时性。在我自己拥有的经验中保证这个实效性有两种方案，就是js的轮询，一个serverSocket。

javascript轮询

就是设置定时通过ajax向后端查询是否有更新内容，如果有就将内容反馈给前端。这样的话，简单实用，但是如果像我这样小规模小并发，完全没有必要考虑性能，但是综合考虑这样不能单纯处理并发靠机器的数量。

Js轮询的话，我想到的就是定时向后端数据库请求数据，检查是否有新的纪录。但是我想到问题，我现在的在线人数小，对后端的服务器也产生不了什么压力，如果是N个人，在一秒内产生的请求时N个，如果一个人开了N个窗口，那就是N*N个请求了，如果这样的N不断增大的，那这样的开销还是不小的。当然由于定时的特性，也不能很完美的展示时效性。

serversocket

这个就很牛逼，说出来吓死人，哈哈！长链接，可以保证时效性哦，弥补了http短板。WebSocket 规范定义了一种 API，可在网络浏览器和服务器之间建立“套接字”连接。简单地说：客户端和服务器之间存在持久的连接，而且双方都可以随时开始发送数据。详细看这里可能需要自己搭梯子http://www.html5rocks.com/zh/tutorials/websockets/basics/。Websocket 这个就是html5的一个的套接字技术,客户端和服务器之间存在持久的连接，而且双方都可以随时开始发送数据。然而它并没有在全部的浏览器中得到实施，也找到一个很好的插件socket.io。但是为了偷懒，使用野狗提供的数据存储和一套api。然后做后端支持。当然第一使用json来存储数据，在设计数据之间的关系遇到不小的挫折。

综合的话，使用web socket技术还是很不错的选择。所以后端使用了野狗咯省得自己去写后端。

来讲讲我是如何实现这个在线聊天室。

设计了四个模块，聊天内容，左部导航，头部导航，输入框。

在接下来做的过程中，使用requirejs和一号店 FFF框架，组件化开发这个东西，开发的还是蛮顺利，但是也遇到一个问题，在实例化对象的时候向后端请求中间遇到已经实例渲染页面，但是数据还没有到位的问题，我就简单粗暴的使用了setTimeout 等到数据加载完成，然后再实例。

账号之前一直是假数据，在建立账号体系的时候遇到了一个比较大的问题，就是token和密码的安全性，通常用md5加密，md5是单向的，相同的字符串产生的md5是相同的，那么也就是说字符串的拼接过程，是不能用给用户看到的，否则其他可以通过枚举来获取到密码。Js的代码对用户都是可见的，所以我就想到用php来对这个过程进行操作，再使用localstorge保存了这些token.token是用来提供一天的保持登陆的功能。

然后基于requierJS通过index.js分别实例化对象模块。首先我第一使用这种模式来开发程序，感觉比函数是还是很不错搭！

然后其他都模块开发了

就简单看一下聊天内容的对象

现在我们来看看这程序的页面吧！

目前这个聊天室，受限于野狗后端API，在很多功能上还不能做到实现。

通过做这个在线聊天室学习到很多，发现了一些现有的东西不能满足需求，所以准备去学习一下，底层的东西。非常想进FEX，我可以学的很快，做的更多。