用原生js+node实现基于WebSocket的聊天应用

简言 (YouChat)

基于webSocket的web通信应用（兼容移动端），后台使用node+express搭建基础http服务，使用socket.io搭建通讯层的ws服务。实现了全部成员的群聊、针对某一成员的私聊以及新消息提示等一些常用功能。前端用原生js编写实现了发送表情以及发送本地图片功能，还用到了 manifest 相关的一些概念，可以通过桌面直接进入。

Git仓库

https://github.com/cp0725/YouChat

启动流程

cd/YouChat

npm install

node server.js

本地访问地址 http://127.0.0.1:8686/YouChat

(没顾上做动态编译 webpack 是构建命令每次修改代码都要运行一次)

登录页

群聊以及私聊功能

发送表情包发送本地图片

移动端UI展现

h5 Notification 的表现效果

另外要说两个知识点是 manifest 和 Notification

manifest
manifest是PWA用到的一个技术点，关于PWA早就想学习一下了，直到最近才看了官方的文档，我们用link标签在页面头部引入一个manifest配置文件，在manifest配置文件里可以配置页面图标、启动动画、应用名称等一些属性，然后通过浏览器把应用发送到桌面下次就可以直接从桌面进入，表现的效果接近原生的app，因为隐藏了浏览器的一些工具栏等操作区。交互性能上也要好很多，下面是相关的表现UI。

桌面图标

启动动画

主要功能

manifest只是PWA相关技术栈的一个技术点，PWA还涉及到离线加载等很多的东西，本应用就只是用manifest配置了一下展现UI。

Notification
Notification是H5的api作用是基于浏览器来触发消息通知而不是页面，也就是说把页面最小化或者切换到别的tab页，Notification的通知消息还是可以正常触发。但是有一个限制在Chrome里必须是https协议，而safari则不对协议做限制，UI表现在上面已经给出来了。