# WebChat

**Repository Path**: _shier/WebChat

## Basic Information

- **Project Name**: WebChat
- **Description**: HTML5 WebSocket 仿微信界面的网页群聊演示Demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2016-07-22
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#WebChat 网页即时多人聊天工具

在线demo，请使用移动设备扫码体验，IOS用户建议使用Safari打开，然后固定到桌面使用
![输入图片说明](http://git.oschina.net/uploads/images/2016/0722/114017_3279de77_132384.png "在这里输入图片标题")

###一款基于HTML5的WebSocket技术实现的界面模仿微信的网页多人即时聊天工具，整个项目没什么技术含量，前后端写的也很烂，但是可以作为一个半成品接着开发或者作为学习的参考。

###已实现的功能和特色

- 使用vw和rem作为尺寸单位，大小屏幕自动缩放适应（ipad自动等比例放大）
- 根据昵称自动生成类似于GitHub的identicon头像
- 支持表情发送，表情来自于QQ默认表情
- 支持本地聊天记录存储（最多50条，由原来的sessionStorage修改为永久的localStorage）
- 支持发送图片（因为服务器不保存任何聊天内容，所以图片本地会做一个js压缩然后传输采用的base64的DataURL，走websocket通道防止消息过长引发异常，所以清晰度比较低，但可以防止成为图床）
- 支持分享音乐（音乐由网易云音乐提供）
- 支持分享地理位置（需定位权限）
- ios支持固定到主屏幕更像一个原生APP
- Android支持消息震动

###未实现（懒得实现）的功能和已知的问题

- [@]用户 功能
- 因为不涉及到数据库，所以用户ID直接采用当前websocket的session id 进行Hash编码后返回作为用户ID，因此当刷新后可能看到自己的历史消息显示为白色且在左边（类似于其他用户发送的消息），这个不采用数据库做用户模块的话暂时想不到更好的方法
- 图片可以额外使用ajax做上传，保存到服务器，同时服务器来生成缩略图和原图，然后返回图片URL，聊天消息中的图片点击可以做查看大图/原图的功能
- 手动清屏
- [HTML5录音的Api](http://caniuse.com/#feat=mediarecorder)在手机端均不支持，所以本想做一个和微信一样发送语音的功能也暂告失败
- PC版本想界面独立做，因为现在的界面其实是手机版的界面，采用rem和vm根据屏幕等比例缩放，不适合于PC端
- 查看在线用户列表和一对一私聊功能

###使用的一些第三方的库
- [identicon.js](https://github.com/stewartlord/identicon.js) 生成类似于GitHub默认头像的js库
- [iscroll](https://github.com/cubiq/iscroll)  纵享丝滑的触摸滚动库
- [laytpl](https://github.com/sentsin/laytpl)  小而美的js模板库
- sha1加密库 (出处忘了是哪了，如果有知道的我可以补上，作用是将昵称加密后生成的hash值给identicon去生成头像)
- [zepto](https://github.com/madrobby/zepto)  用极小的体积呈现一个jQuery的完美替代
- [fastjson](https://github.com/alibaba/fastjson)  后台Java的Json生成和解析库，来自于阿里巴巴


####最后一个小补充和插曲

做这个小demo项目是看到有人在开源中国的动弹上发了一个简易的websocket聊天工具，界面产不忍赌，而自己做了很久的web开发，但从没尝试过html5的websocket，所以自己就想弄一个玩玩顺便理解一下相关的技术。
在开发第一二个初版的时候因为没人帮忙一起测试，所以就发了一个二维码在开源中国的动弹里面（发二维码的初衷是因为我的界面主要针对手机端对HTML5和css3支持比较好的浏览器，让大部分用户直接使用移动设备扫码打开，如果发链接估计大部分人会用pc浏览器打开，而pc浏览器就对HTML5和css3的支持就各种参差不齐了），万万没想到“万恶的红薯”直接跑到我的动弹下面警告我说再发就封掉了，我不理解，开源中国难道不是一个讲究技术的网站吗？我发个二维码找人测试怎么就要被封掉了？我哪里违规了还是怎么的？开源中国的动弹难道不是大家的动弹么？难道开源中国的动弹只能发露点的性感小图，恶搞的段子和无聊的刷屏签到就不能发个项目地址给大家测试和娱乐了？还是说红薯先生觉得我的东西写的烂，是否技术不好的就不够资格在开源中国混？作为一个虽然不怎么在开源中国发言但是一直喜欢开源中国的用户来说，红薯先生没一句解释就直接说不让我再发了的行为让我感到心寒。