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

    题目链接: https://www.luogu.org/problemnew/show/UVA1330 http://poj.org/problem?id=1964 https://www.luogu ...

  2. Qtspim和MIPS的坑

    Qtspim和MIPS的坑 数组要么用空格隔开,要么逗号之后再加一个空格 乘法的结果保存在(HI,LO)寄存器中,但是不能直接通过Move得到,必须使用mfhi 和mflo指令 用户输入的数组最后一个 ...

  3. O028、nova-compute 部署 instance 详解

    参考https://www.cnblogs.com/CloudMan6/p/5451276.html   本节讨论 nova-compute ,并详细分析 instance 部署的全过程.   nov ...

  4. webpack配置不同打包配置

    生成环境与开发环境打包配置 使用package.json配置npm run开启不同的打包配置 ...webpack基本使用最后一篇博客 在上一篇博客中详细的演示了webpack开启本地服务和热更新,这 ...

  5. Flume下读取kafka数据后再打把数据输出到kafka,利用拦截器解决topic覆盖问题

    1:如果在一个Flume Agent中同时使用Kafka Source和Kafka Sink来处理events,便会遇到Kafka Topic覆盖问题,具体表现为,Kafka Source可以正常从指 ...

  6. Ceph自动化部署----Ceph-ansible

    目录 Ceph自动化部署----Ceph-ansible 一.前言--Ceph的几种不同的部署方式 二.使用Ceph-ansible部署Ceph Ceph自动化部署----Ceph-ansible 一 ...

  7. act_window 属性

    窗口Action(ir.actions.act_window ) 最常用的action类型,用于将model的数据展示出来 字段列表: 1.res_model -- 需要在view里显示数据的mode ...

  8. 05.Zabbix自动化监控

    1.Zabbix自动发现(被动) 网络发现官方手册 网络发现由两个阶段组成:发现discovery和动作actions 1.单击配置->自动发现->启动默认的Local network 2 ...

  9. bom and dom

    bom:Broswer Object Model: 浏览器对象模型- navigator: 获取客户机的信息(浏览器的信息)document.write(navigator.appName);- sc ...

  10. Summer training #8

    A: B:按题意直接暴力找符合题意的数的个数 #include <bits/stdc++.h> #include <cstring> #include <iostream ...