起因

以前微信公众号使用的留言板就是就是用户给公众号发消息
然而随着公众号功能的增加，用户的爆炸式增长，这样的留言方式越来越不方便，存在以下一些问题：

• 用户留言时如果输入一些特定的词语（一些模块关键词），会被认为是用户想使用该功能，导致留言失败
• 用户留言结束后，未及时退出留言状态，导致用户后续发送的消息依旧被当作留言处理
• 当管理员回复留言时，用户直接回复可能也是无效的
• 由于图片消息默认被某模块定义，导致用户无法发送异常截图给我们

于是就自己用Socket.io来写一个简单留言板，下面记录下编写时碰到的一些问题

点击发送按钮时，键盘会收回

如图所示，由于发送按钮是个Button，当用户点击发送后，由于输入框失去了聚集，键盘就会自动收回。然而，这对于用户体验来说问题十分大的经过学长（小王、加贝）的指导，将按钮用Input标签代替，用CSS将Input改成Buton的模样，当点击时继续聚焦到文字输入框，这样由于发送和输入都是输入框，键盘自然就不会收回了。

Emoji表情的处理与显示

Emoji的处理是非常蛋疼的

• 首先，在服务器端，用的是MySQL，MySQL默认utf8编码最多只能存3个字节，然而Emoji表情是4个字节的，根本就存放不下，谷歌了下，大多数是说改MySQL编码为utf8mb4_general_ci，然而因为某些原因不能使用这种方式，最后选择了转码，判断当字节数大于3的就进行转码处理

• 其次，在客户端怎么显示呢，在微信里面Emoji是无法显示的，那么只能结合Emoji的表情的编码写正则，正则到表情后将表情编码替换为对应的表情图片。

• 那么，问题来了，刚开始不清楚情况，正则时只处理了Softbank这一种Emoji版本，然后使用时发现部分手机发送的Emoji表情都无法显示，仔细一研究发现，原来Emoji存在很多版本，常见的有Unified、DoCoMo、KDDI、Softbank、Google，然而不同的手机使用的Emoji版本不一定一样。

• 在尝试将其他版本的Emoji编码转化为Softbank编码然后再来显示时，问题又来了，Softbank版本表情是相对较多的，DoCoMo版本表情相对较少，存在DoCoMo版本一个表情对应多个Softbank表情的情况，然后映射到了不一致的表情，导致错误的显示结果。

最终，选择了DoCoMo表情版本来显示，其他的版本的Emoji表情统一转换到DoCoMo版本的Emoji表情

多用户的处理问题

留言板嘛，由于存在多用户与多管理员，又涉及到管理权限的问题，考虑的逻辑相对复杂一些

• 由于聊天时通过WebSocket实现的。然而留言又是私密留言的，那么当有多个用户同时留言时，一个用户的留言不能推送到其他的用户的WebSocket下，然而当一个用户留言时可能有一个或多个管理员在留言页面，那么用户消息肯定要推送给解决这个用户问题的管理员，而不能推送给解决其他用户问题的管理员，然后如果用户或者管理开了多个留言窗口，那么用户或管理员在其他窗口发送的消息也要同步显示

• 由于聊天室的需要，这个留言板要升级为聊天室，所以还存在一（多）个用户对一（多）个用户的情况

• 由于消息及时性的需要，如果没有管理员在于用户交流的时候，用户的消息肯定要通知到管理员的微信上，交流时，消息不能同时微信骚扰管理员，同理，管理员的消息也要通知到用户。

滑动卡顿问题

• 刚开始时，所有的消息都在一个DIV里面滚动，测试过所有主流浏览器（桌面版与移动版都测试过），滑动非常流畅，然而，不知什么情况，就在安卓版本微信里面使用时（IOS不存在这个问题），非常的卡顿，根本就是滑不动。

• 研究分析半天就是没有找到问题所在，应该是微信本身的问题（可以随便用BootStrap建个网页，然后使用模态框，将内容填充到需要滚动，然后用微信访问，滑动，就能体验这种感觉了）

• 鉴于在body里面滑动是不存在卡顿的，只有去掉了div，调整布局，然后滑动正常了

后记

我们共同开发的两个人都是后端的，然而一些简单的前端页面又是必须的，用的都是原生CSS，界面虽一般，但能用就行