websocket发送文字，图片及语音（thinkjs-TS项目）

一、基本配置

可参考官方文档进行https://thinkjs.org/zh-cn/doc/3.0/websocket.html

二、文字

2.1 发送文字

     socket.emit('send', "要发送的文字");

2.2 后端接收

 this.ctx.wsData 文字不用处理直接接收即可

三、图片

3.1. 图片发送

 为了做演示，直接在电脑上拿到图片发送   let Imginput = document.getElementById('tupian');let file = Imginput.files[0];       //得到该图片let reader = new FileReader();      //创建一个FileReader对象，进行下一步的操作reader.readAsDataURL(file);              //通过readAsDataURL读取图片reader.onload =function () {            //读取完毕会自动触发，读取结果保存在result中 ，data是一个base64字符串let data = {img: this.result};socket.emit('producer', data);}

3.2 图片处理

 const path = 'www/static/image/';const name = Date.now(); //定义图片名称let imagepath = path + `${name}.png`;  //拼接let base64 = reqdata.info.replace(/^data:image\/\w+;base64,/, ""); //去掉头部的无用数据let imagebuffer = Buffer.from(base64, 'base64');  //返回一个被 base64的值初始化的新的 Buffer 实例let isEmity = fs.existsSync(path);  //判断文件是否存在if (!isEmity){fs.mkdirSync(path)  //创建文件}try {fs.writeFileSync(imagepath, imagebuffer); //同步写入文件} catch (e) {throw  e;}

四、音频

4.1 h5语音录制

插件地址 https://github.com/xiangyuecn/Recorder//引入插件<script src="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/recorder.mp3.min.js"></script>
**********以下为官网实例 用于获取一个音频*****************
var rec;
/**调用open打开录音请求好录音权限**/
var recOpen=function(success){//一般在显示出录音按钮或相关的录音界面时进行此方法调用，后面用户点击开始录音时就能畅通无阻了rec=Recorder({type:"mp3",sampleRate:16000,bitRate:16 //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎,onProcess:function(buffers,powerLevel,bufferDuration,bufferSampleRate,newBufferIdx,asyncEnd){//录音实时回调，大约1秒调用12次本回调//可利用extensions/waveview.js扩展实时绘制波形//可利用extensions/sonic.js扩展实时变速变调，此扩展计算量巨大，onProcess需要返回true开启异步模式}});//var dialog=createDelayDialog(); 我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且（或者国产系统UC系）浏览器没有任何回调，此处demo省略了弹窗的代码rec.open(function(){//打开麦克风授权获得相关资源//dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消//rec.start() 此处可以立即开始录音，但不建议这样编写，因为open是一个延迟漫长的操作，通过两次用户操作来分别调用open和start是推荐的最佳流程success&&success();},function(msg,isUserNotAllow){//用户拒绝未授权或不支持//dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消console.log((isUserNotAllow?"UserNotAllow，":"")+"无法录音:"+msg);});
};/**开始录音**/
function recStart(){//打开了录音后才能进行start、stop调用rec.start();
};/**结束录音**/
function recStop(){rec.stop(function(blob,duration){console.log(blob,(window.URL||webkitURL).createObjectURL(blob),"时长:"+duration+"ms");rec.close();//释放录音资源，当然可以不释放，后面可以连续调用start；但不释放时系统或浏览器会一直提示在录音，最佳操作是录完就close掉rec=null;//已经拿到blob文件对象想干嘛就干嘛：立即播放、上传
***********发送处理数据***************FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。（引用mdn解释）let reader = new FileReader();//开始读取取文件的内容。（是一个base64字符串表示文件内容）reader.readAsDataURL(blob);reader.onloadend = function () {console.log('读取完成')console.log(reader.result)database =reader.resultsocket.emit('producer', database)}
***********发送数据***************
};
//这里假设立即运行，只录3秒，录完后立即播放，本段代码copy到控制台内可直接运行
recOpen(function(){recStart();setTimeout(recStop,3000);
});

4.2. 服务端处理

与图片处理的思路基本一致，只不过与图片不同的是base64de  头部是aduio，这块需要注意
const path = 'www/static/audio/';let name = Date.now();let aduiopath = path + `${name}.mp3`;let base64 = reqdata.info.replace(/^data:audio\/\w+;base64,/, "");console.log(base64)let audiobuffer = Buffer.from(base64,'base64');try {let isEmity = fs.existsSync(path);if (!isEmity) {fs.mkdirSync(path);}fs.writeFileSync(aduiopath,audiobuffer)}catch (e) {throw e}

websocket发送文字，图片及语音（thinkjs-TS项目）相关推荐

uniapp之webscoket聊天文字/图片/表情/语音
. <image :src="thead_image" @tap="tochatset()"> <view class="bubbl ...
OpenCV C++ 通过Websocket发送摄像头图片到Web端
文章目录 1. 说明 2. 流程 3. 代码 3.1 C++端代码 3.1.1 主要逻辑 cv::Mat格式数据转换为jpg格式数据 3.1.2 websocket服务端代码 3.2 Web端代码 i ...
java编写两邮件传输,JAVA邮件发送(文字+图片+附件)【源码】
介绍: 电子邮件协议电子邮件的在网络中传输和网页一样需要遵从特定的协议,常用的电子邮件协议包括 SMTP,POP3,IMAP.其中邮件的创建和发送只需要用到 SMTP协议,所有本文也只会涉及到SMT ...
环信聊天，可发图片和语音2
1.录音的代码实现,先写一个按钮了,当点击时执行的事件 /*** 录音*/recording.setOnTouchListener(new View.OnTouchListener() {@Overr ...
把图片变成语音怎么弄？快来看看这篇文章
在图书馆.美术馆.博物馆等公共场所举办展会时,每个展品都附带着相应的文字说明,旨在让参观者更好地了解展品的背景.历史.文化等方面的信息.此外,展馆也会将展品的信息以语音形式播出,以便让看不清或看不懂文 ...
向企业微信发送文字、图片的接口【亲测有效】
向企业微信发送文字.图片的接口[亲测有效] 写在github上了:https://github.com/XuJianzhi/send_text_image_to_wechat/blob/main/RE ...
python 微信发送图片_使用python向企业微信发送文字和图片消息
使用python向企业微信发送文字和图片消息吐槽一下企业微信的api文档真的不好读······ 企业微信本来是有功能,可以直接把图片显示到正文的,但是那个api我调用一直出错,各种折腾也没解决.后来 ...
Python模拟发送QQ文字/图片消息
Python模拟发送QQ文字/图片消息 from io import BytesIOimport win32gui import win32con import win32clipboard as w ...
高仿腾讯 QQ，已经实现了纯文本，表情，图片，语音，位置等信息的发送。
QQ 项目地址:HuTianQi/QQ 简介:高仿腾讯 QQ,已经实现了纯文本,表情,图片,语音,位置等信息的发送. 一款高仿腾讯 QQ 的 IM 软件,基于 bmob SDK,已经实现聊天,表情,图 ...

websocket发送文字，图片及语音（thinkjs-TS项目）

一、基本配置

二、文字

三、图片

四、音频

websocket发送文字，图片及语音（thinkjs-TS项目）相关推荐

最新文章

热门文章