百度前端面试题-类似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分别实例化对象模块。首先我第一使用这种模式来开发程序,感觉比函数是还是很不错搭!

XB版聊天室完成了

然后其他都模块开发了

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

XB版聊天室完成了

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

XB版聊天室完成了

XB版聊天室完成了

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

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

原文地址:https://www.cnblogs.com/laiqun/p/5652206.html