websocket聊天体验(二)
上一篇说到后续可以支持:最近历史、表情+图片,顺便还实现了简易的音频和视频。暂时没有实现实时语音对讲,有待后续再研究。点开在线聊天页面,即可看到最近历史记录(18条)。
聊天的底层数据都是基于txt文本,表情+图片使用<img src=”base64”/>提供支持,“表情”其实是支持本地图片上传,“图片”其实是支持屏幕截图(从剪贴板获取图片),然后通过js转码为base64字符串,通过websocket发送到聊天室即可。
![]()
socket对象使用了ReconnectingWebSocket开源组件来获取,同时还使用了recorder组件来实现录音功能。
![]()
使用了MediaRecorder来获取视频(可以在页面查看源码,这里图片排版较好一点)
![]()
下面是控制按钮:点击开始录制,松开立即发送。
![]()
如果发送之后不想别人看见怎么办?历史只有18条,发送几十条其他文字覆盖即可。
后续实时语音对讲待研究。
websocket聊天体验(二)的更多相关文章
- websocket聊天体验
light-example-4j/websocket目录有client-to-server.peer-to-peer两个示例项目,解决了我的两个问题:在线聊天.日志查看. 在线聊天,后续可以支持:最近 ...
- Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试
Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试一.下载相关安装包 1.下载nginx最新版本(nginx1.3.13版之后才支持websocket协议) 下载地址 ...
- Netty入门(一)之webSocket聊天室
一:简介 Netty 是一个提供 asynchronous event-driven (异步事件驱动)的网络应用框架,是一个用以快速开发高性能.高可靠性协议的服务器和客户端. 换句话说,Netty 是 ...
- socket实现聊天功能(二)
socket实现聊天功能(二) WebSocket协议是建立在HTTP协议之上,因此创建websocket服务时需要调用http模块的createServer方法.将生成的server作为参数传入so ...
- Spring WebSocket教程(二)
实现目标 这一篇文章,就要直接实现聊天的功能,并且,在聊天功能的基础上,再实现缓存一定聊天记录的功能. 第一步:聊天实现原理 首先,需要明确我们的需求.通常,网页上的聊天,都是聊天室的形式,所以,这个 ...
- 使用.NET Core和Vue搭建WebSocket聊天室
博客地址是:https://qinyuanpei.github.io. WebSocket是HTML5标准中的一部分,从Socket这个字眼我们就可以知道,这是一种网络通信协议.WebSocket是 ...
- Netty 实现 WebSocket 聊天功能
上一次我们用Netty快速实现了一个 Java 聊天程序(见http://www.waylau.com/netty-chat/).现在,我们要做下修改,加入 WebSocket 的支持,使它可以在浏览 ...
- WebSocket聊天室demo
根据Socket异步聊天室修改成WebSocket聊天室 WebSocket特别的地方是 握手和消息内容的编码.解码(添加了ServerHelper协助处理) ServerHelper: using ...
- 用Java构建一个简单的WebSocket聊天项目之新增HTTP接口调度
采用框架 我们整个Demo基本不需要大家花费太多时间,就可以实现以下的功能. 用户token登录校验 自我聊天 点对点聊天 群聊 获取在线用户数与用户标签列表 发送系统通知 首先,我们需要介绍一下我们 ...
随机推荐
- JavaScript内置排序方法sort实现排序操作
var arr = [10,8,6,9,1,7,2,13,5,1,9]; //sort排序 arr.sort(function(a,b){ //可以改变数组本身的排序方法 return a-b; }) ...
- HashMap工作原理总结
看了不少关于HaskMap工作原理的博客,下面自己总结记录一下: 1.了解HashMap之前,需要知道Object类的两个方法:hashCode和equals: 默认实现方法: /** JNI,调用底 ...
- CSS模块化:less
less的安装与基本使用 less的语法及特性 一.本地使用less的方法 Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言.是一种动态样式语言,属于c ...
- OGG学习笔记02
实验环境:源端:192.168.1.30,Oracle 10.2.0.5 单实例目标端:192.168.1.31,Oracle 10.2.0.5 单实例 1.模拟源数据库业务持续运行 2.配置OGG前 ...
- 不升级Element-UI 版本为时间选择器增加标记功能
Element-UI里的date-picker是个优秀的时间选择器,支持的选项很多,定制型很强.不过date-picker在2.12版本之前并不支持自定义单元格样式,也就是2.12的cellClass ...
- linux命令详解——sed
sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法 sed命令行格式为: se ...
- 开源Android 恶意软件Radio Balouch
安全研究机构 ESET 首次发现了开源 Android 间谍软件在 Google Play 上的恶意信息窃取行为,并且在被删除后仍在Google Play 重复出现.据悉,第一个间谍软件是基于开源间 ...
- C# 列表中查找大小比较
列表中查找大小比较
- Scrapy爬取小说简单逻辑
Scrapy爬取小说简单逻辑 一 准备工作 1)安装Python 2)安装PIP 3)安装scrapy 4)安装pywin32 5)安装VCForPython27.exe ........... 具体 ...
- 关于 keepalived+lvs 中参数 persistence_timeout 的说明
在keepalived+lvs的配置文件keepalived.conf中有一个选项persistence_timeout 该选项的作用:在一定时间内使来自于同一个Client的所有TCP请求被负载到同 ...