websocket聊天体验(二)

上一篇说到后续可以支持:最近历史、表情+图片,顺便还实现了简易的音频和视频。暂时没有实现实时语音对讲,有待后续再研究。点开在线聊天页面,即可看到最近历史记录(18条)。

聊天的底层数据都是基于txt文本,表情+图片使用<img src=”base64”/>提供支持,“表情”其实是支持本地图片上传,“图片”其实是支持屏幕截图(从剪贴板获取图片),然后通过js转码为base64字符串,通过websocket发送到聊天室即可。

image

socket对象使用了ReconnectingWebSocket开源组件来获取,同时还使用了recorder组件来实现录音功能。

image

使用了MediaRecorder来获取视频(可以在页面查看源码,这里图片排版较好一点)

image

下面是控制按钮:点击开始录制,松开立即发送。

image

如果发送之后不想别人看见怎么办?历史只有18条,发送几十条其他文字覆盖即可。


后续实时语音对讲待研究。

posted @ 2019-06-27 20:40 xlongwei 阅读(...) 评论(...) 编辑 收藏
xlongwei