上一篇说到后续可以支持:最近历史、表情+图片,顺便还实现了简易的音频和视频。暂时没有实现实时语音对讲,有待后续再研究。点开在线聊天页面,即可看到最近历史记录(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. JXOI 2018滚粗记

    --Update5.2 成绩出了,见后文 听说省选VAN写游记是传统,本蒟蒻也来发一篇吧. DAY 0 本来以为省选不在JKFZ举行的结果又是在JKFZ,本校作战感觉终究会是好一些吧,和jyh一起向教 ...

  2. 3 java 笔记

    1 垃圾回收机制能够很好地提高编程效率 2 垃圾回机制保护程序的完成性 3 面向对象的三种基本特征:继承,封装,多态 4 面向对象的方式:OOA(面向对象的分析),OOD(面向对象的设计)和OOP(面 ...

  3. 第二十五篇 jQuery 学习7 获取并设置 CSS 类

    jQuery 学习7 获取并设置 CSS 类   jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...

  4. RPC性能优化

    优化 1:元数据共享 hessian 序列化会将两种信息写到输出流: 元数据:即类全名,字段名 值数据:即各个字段对应值(如果字段是复杂类型,则会递归传递该复杂类型 的元数据和内部字段的值数据) 在 ...

  5. JVM类加载机制和内存模型

    一.JVM类加载机制 首先需要了解一下类加载器(ClassLoader): ClassLoader是Java的一个核心组件,它主要作用是从系统外部获得Class二进制数据流,然后将数据流装载到系统,交 ...

  6. 工作总结 select sum(A+B) from table select (A+B) from table

    select IsTop,ActivityGlXs from ActivityGlInfo 其他类似 可以在 原理 先字段值 相加 根据值 再聚合运算 其他聚合函数类似 总结: 表字段是 可以相加,相 ...

  7. pycharm的快捷键以及快捷意义

    ctrl+a 全选 ctrl+c 复制(默认复制整行) ctrl+v 粘贴 ctrl+x 剪切(默认复制整行) ctrl+f 搜索 ctrl+z 撤销 ctrl+shift+z 反撤销 ctrl+d ...

  8. 日常系统维护之修复linux的grub引导

    恩,不知道怎么表达为win10的更新很烦人,其实我感觉windows用的不是那么顺手,但是制作视频的时候还是要用到,图片的话linux也可以胜任,毕竟GUN IMAGE还是挺不错的,但到了视频制作方面 ...

  9. sum(n,m)的解法

    给出两个整数n和m,你应该计算从n到m的所有整数的和.换句话说,你应该计算: SUM(n,m)= n +(n + 1)+(n + 2)+ ... +(m-1)+ m 方法1. 方法2.

  10. PHP程序员要掌握的技能

    1. Composer 第一点就要提 Composer ,自从 Composer 出现后,PHP 的依赖管理可以变得非常简单.程序内依赖一些类库和框架,直接使用 Composer 引入即可,通过使用 ...