Instant Chat —— 初学 WebSocket

之前偶然发现个游戏:agar.io,觉得好有意思,想学习一下。

看了下是用 WebSocket 做的,是自己写的,没有用 Socket.io 来做。

于是就和 iojs 一起,做了个即时聊天的应用,取名叫 Instant Chat

用户输入自己的昵称后将页面转发给好友即可实现通话,特点是没有发送键,输入的内容会实时显示在对方屏幕上。

从前端到后端完全事件驱动,即时性非常好。

用了 bootstrap ,但是精简了其代码,全部 CSS 只有 1.8K 。

同样没有用 Socket.io ,虽说可以优雅降级,但实在太过臃肿,前端库就 89.3K 。而且我试了一下,offline 事件的延迟很严重,达不到我的要求。

这是界面:

这是 2 个不同浏览器在同一会话中的效果。


然而这个东西本身并没有什么卵用~

说一下写的过程吧, WebSocket 没什么说的,原生的实现方法,再加上前端的一些逻辑就搞定了。

主要说下后端,也是我第一次写 node 应用。

难点主要就在客户端 Socket 对象的保存上,因为客户端下线(可能是关闭页面、返回到 QQ 或微信等),重新连接回来就是另一个 Socket 了,我大部分时间都花在正确切换这些对象上了。

没看任何书直接开写,前端 + 后端一共花了 2 天。

第 1 天,基本上只切出了 HTML,之前写 php 有了惯性思维,总觉得页面是从头开始执行的。于是在需要保存 Client Socket 实例的时候纠结了很久,不知道该怎么存,存到数据库里?试了 mongoDB 和 memcache 都不可行。

折腾了一天也没什么结果,晚上躺在床上才猛然想起来 node 是一个 执行环境……

第 2 天,有了头天晚上的思路,写起来就好办多了,一天完事~

不得不说 node 还是比较好用,就是包比较多,像 md5()time() 啊这些 php 中的基本函数都得自己引入相关的包才能实现……

另外如果我有多个 node 站点,就要运行多个 node 进程吗?求知情人士解答~


最后再说几个自认为比较贴心的设计:

  • 特别照顾了手机用户,在手机上键盘弹起来时内容会自动上挤

  • 记忆使用过的昵称,发起新会话时提供直接使用的选项(LocalStorage 实现)

  • 上下线即时提示,即时性非常高。对方下线时本地输入框将被禁用

  • 地址可复用,一旦生成永久有效。即使双方都下线,但再上线时依然可用,也可以转发给别人

  • 当一个地址有 2 名用户正在聊天时,再进入此地址的访客将被跳转至首页。当一名用户退出后,则其他人可正常加入

  • 超过 2 行的内容自动删除,所以可以不用停下来一直打字,连按 2 次换行即可清空输入框