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.result
                    socket.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
            }