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

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

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

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

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

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

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

websocket聊天体验(二)的更多相关文章

  1. websocket聊天体验

    light-example-4j/websocket目录有client-to-server.peer-to-peer两个示例项目,解决了我的两个问题:在线聊天.日志查看. 在线聊天,后续可以支持:最近 ...

  2. Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试

    Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试一.下载相关安装包 1.下载nginx最新版本(nginx1.3.13版之后才支持websocket协议) 下载地址 ...

  3. Netty入门(一)之webSocket聊天室

    一:简介 Netty 是一个提供 asynchronous event-driven (异步事件驱动)的网络应用框架,是一个用以快速开发高性能.高可靠性协议的服务器和客户端. 换句话说,Netty 是 ...

  4. socket实现聊天功能(二)

    socket实现聊天功能(二) WebSocket协议是建立在HTTP协议之上,因此创建websocket服务时需要调用http模块的createServer方法.将生成的server作为参数传入so ...

  5. Spring WebSocket教程(二)

    实现目标 这一篇文章,就要直接实现聊天的功能,并且,在聊天功能的基础上,再实现缓存一定聊天记录的功能. 第一步:聊天实现原理 首先,需要明确我们的需求.通常,网页上的聊天,都是聊天室的形式,所以,这个 ...

  6. 使用.NET Core和Vue搭建WebSocket聊天室

    博客地址是:https://qinyuanpei.github.io.  WebSocket是HTML5标准中的一部分,从Socket这个字眼我们就可以知道,这是一种网络通信协议.WebSocket是 ...

  7. Netty 实现 WebSocket 聊天功能

    上一次我们用Netty快速实现了一个 Java 聊天程序(见http://www.waylau.com/netty-chat/).现在,我们要做下修改,加入 WebSocket 的支持,使它可以在浏览 ...

  8. WebSocket聊天室demo

    根据Socket异步聊天室修改成WebSocket聊天室 WebSocket特别的地方是 握手和消息内容的编码.解码(添加了ServerHelper协助处理) ServerHelper: using ...

  9. 用Java构建一个简单的WebSocket聊天项目之新增HTTP接口调度

    采用框架 我们整个Demo基本不需要大家花费太多时间,就可以实现以下的功能. 用户token登录校验 自我聊天 点对点聊天 群聊 获取在线用户数与用户标签列表 发送系统通知 首先,我们需要介绍一下我们 ...

随机推荐

  1. win10上使用php与python实现与arduino串口通信

    注意: php 需要php7,安装及开启php_dio.dll com口按照实际的进行设置,如果不知道可以打开arduino编辑器进行查看 可以与用户实现命令行交互,但是效率过慢,不清楚如何优化,使用 ...

  2. 【ExtJs】ext前台中的日期控件传输时间到后台的转换保存过程

    //前台日期选择框 {fieldLabel:, padding: ',afterLabelTextTpl: required,allowBlank: false,format: 'Y-m-d H:i: ...

  3. vue进阶:vs code添加vue代码片段

    如何设置? 选择或创建 配置代码 如何使用? 一.如何设置? 进入vs code主界面-->使用快捷键“ctrl + shift + p”: 如果你是使用Preferences:Configur ...

  4. 转载Linux常用命令

    转自:https://blog.csdn.net/deng_xj/article/details/88803148 Linux常用shell命令 [root@dengxj]#各项含义[用户名@计算机名 ...

  5. mybatis sql语句中 in() 长度为0或null的情况

    mybatis sql语句中 in() 长度为0或null的情况 比如: select * from A where colName IN <foreach collection="m ...

  6. 网络基础篇之NAT(原理)

    一.NAT的产生 由于网络的飞速发展和网络应用的极速增多,致使IPv4可用地址空间逐渐枯竭.尽管IPv6可以在根本上解决地址枯竭问题,但IPv4发展到IPv6还需要一个过渡,而这便产生了NAT. 二. ...

  7. Windows Server 2016分层式存储,使用PowerShell修改底层介质类型

    新部署的备份服务器,需要做分层式存储,按照网上最常见一个作者叫刘兵的文档,名叫<Windows Server2016分层存储技术详细拆解手册>,做到使用PowerShell修改磁盘的Med ...

  8. springboot中解决servlet乱码问题,使用配置类注册过滤器解决

    8.1 使用传统的Spring提供的字符编码过滤器 在03-springboot-web中的ServletConfig中配置文件类,注册字符编码过滤器 @Bean public FilterRegis ...

  9. Ubuntu 18.04 手动升级内核

    一般情况下,系统正常更新,会自动升级内核到可用的最新版. 查看已安装的内核 $ sudo dpkg -l | grep linux-image 查看当前使用的内核 $ sudo uname -r 查看 ...

  10. ora-01847:月份中日的值必须介于 1 和当月最后一日之间

    今天解决了一个奇葩问题: ORA-01847: 月份中日的值必须介于 1 和当月最后一日之间 将数据从一个视图倒入到一个同结构的表中,但是老报错,也就那么几个字段,肉眼真看不出来什么问题,但是既然报这 ...