澳门新萄京:websocket索求其与语音
分类:澳门新萄京最大平台

websocket探究其与语音、图片的力量

2015/12/26 · JavaScript · 3 评论 · websocket

原稿出处: AlloyTeam   

提起websocket想比大家不会目生,借使陌生的话也没提到,一句话回顾

“WebSocket protocol 是HTML5一种新的合计。它完毕了浏览器与服务器全双工通讯”

WebSocket相相比守旧那个服务器推本领差不离好了太多,大家得以挥手向comet和长轮询那么些技能说拜拜啦,庆幸大家生活在富有HTML5的一世~

那篇文章大家将分三有个别探寻websocket

率先是websocket的广阔使用,其次是完全自个儿创建服务器端websocket,最后是关键介绍利用websocket制作的多少个demo,传输图片和在线语音聊天室,let’s go

一、websocket常见用法

此地介绍二种本身感到大范围的websocket完成……(注意:本文构造建设在node上下文境况

1、socket.io

先给demo

JavaScript

var http = require('http'); var io = require('socket.io'); var server = http.createServer(function(req, res) { res.writeHeader(200, {'content-type': 'text/html;charset="utf-8"'}); res.end(); }).listen(8888); var socket =.io.listen(server); socket.sockets.on('connection', function(socket) { socket.emit('xxx', {options}); socket.on('xxx', function(data) { // do someting }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var http = require('http');
var io = require('socket.io');
 
var server = http.createServer(function(req, res) {
    res.writeHeader(200, {'content-type': 'text/html;charset="utf-8"'});
    res.end();
}).listen(8888);
 
var socket =.io.listen(server);
 
socket.sockets.on('connection', function(socket) {
    socket.emit('xxx', {options});
 
    socket.on('xxx', function(data) {
        // do someting
    });
});

深信不疑通晓websocket的同班不容许不知情socket.io,因为socket.io太知名了,也很棒,它本人对过期、握手等都做了拍卖。笔者猜测那也是促成websocket使用最多的方法。socket.io最最最优质的一些正是优雅降级,当浏览器不援救websocket时,它会在中间优雅降级为长轮询等,客户和开荒者是不必要关爱具体落到实处的,很有利。

只是事情是有两面性的,socket.io因为它的健全也推动了坑的地方,最根本的就是臃肿,它的卷入也给多少推动了非常多的简报冗余,何况优雅降级这一优点,也陪伴浏览器规范化的扩充稳步失去了大侠

Chrome Supported in version 4
Firefox Supported in version 4
Internet Explorer Supported in version 10
Opera Supported in version 10
Safari Supported in version 5

在此间不是批评说socket.io倒霉,已经被淘汰了,而是不经常候大家也得以虚拟部分别样的贯彻~

 

2、http模块

刚好说了socket.io臃肿,那今后就来讲说便捷的,首先demo

JavaScript

var http = require(‘http’); var server = http.createServer(); server.on(‘upgrade’, function(req) { console.log(req.headers); }); server.listen(8888);

1
2
3
4
5
6
var http = require(‘http’);
var server = http.createServer();
server.on(‘upgrade’, function(req) {
console.log(req.headers);
});
server.listen(8888);

相当的粗略的贯彻,其实socket.io内部对websocket也是如此完成的,可是前面帮我们封装了部分handle管理,这里我们也足以和谐去丰硕,给出两张socket.io中的源码图

澳门新萄京 1

澳门新萄京 2

 

3、ws模块

前面有个例子会用到,这里就提一下,前边具体看~

 

二、自个儿落成一套server端websocket

正要说了二种常见的websocket完毕情势,今后我们怀想,对于开辟者来讲

websocket相对于守旧http数据交互模式以来,扩张了服务器推送的风云,客商端接收到事件再张开相应管理,开采起来分裂并不是太大呀

那是因为那几个模块已经帮我们将数量帧分析那边的坑都填好了,第二有的我们将尝试自个儿创建一套简便的服务器端websocket模块

谢谢次碳酸钴的钻探补助,小编在此处那有的只是轻便说下,借使对此有意思味好奇的请百度【web才能商量所】

友善姣好服务器端websocket首要有两点,三个是选拔net模块接受数据流,还会有三个是对照官方的帧结构图深入分析数据,达成这两有的就早就成功了全部的平底职业

第一给贰个客商端发送websocket握手报文的抓包内容

顾客端代码很轻便

JavaScript

ws = new WebSocket("ws://127.0.0.1:8888");

1
ws = new WebSocket("ws://127.0.0.1:8888");

澳门新萄京 3

劳务器端要本着这么些key验证,正是讲key加上一个一定的字符串后做壹次sha1运算,将其结果调换为base64送回去

JavaScript

var crypto = require('crypto'); var WS = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'; require('net').createServer(function(o) { var key; o.on('data',function(e) { if(!key) { // 获取发送过来的KEY key = e.toString().match(/Sec-WebSocket-Key: (. )/)[1]; // 连接上WS那个字符串,并做三次sha1运算,最终转变来Base64 key = crypto.createHash('sha1').update(key WS).digest('base64'); // 输出重回给客商端的多少,那么些字段都是必需的 o.write('HTTP/1.1 101 Switching Protocolsrn'); o.write('Upgrade: websocketrn'); o.write('Connection: Upgradern'); // 这么些字段带上服务器管理后的KEY o.write('Sec-WebSocket-Accept: ' key 'rn'); // 输出空行,使HTTP头结束 o.write('rn'); } }); }).listen(8888);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var crypto = require('crypto');
var WS = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11';
 
require('net').createServer(function(o) {
var key;
o.on('data',function(e) {
if(!key) {
// 获取发送过来的KEY
key = e.toString().match(/Sec-WebSocket-Key: (. )/)[1];
// 连接上WS这个字符串,并做一次sha1运算,最后转换成Base64
key = crypto.createHash('sha1').update(key WS).digest('base64');
// 输出返回给客户端的数据,这些字段都是必须的
o.write('HTTP/1.1 101 Switching Protocolsrn');
o.write('Upgrade: websocketrn');
o.write('Connection: Upgradern');
// 这个字段带上服务器处理后的KEY
o.write('Sec-WebSocket-Accept: ' key 'rn');
// 输出空行,使HTTP头结束
o.write('rn');
}
});
}).listen(8888);

与此相类似握手部分就早就做到了,前面正是多少帧分析与变化的活了

先看下官方提供的帧结构暗中提示图

澳门新萄京 4

简简单单介绍下

FIN为是不是停止的标识

澳门新萄京:websocket索求其与语音。EnclaveSV为预留空间,0

opcode标志数据类型,是或不是分片,是不是二进制剖析,心跳包等等

交给一张opcode对应图

澳门新萄京 5

MASK是还是不是选用掩码

Payload len和后边extend payload length表示数据长度,那一个是最辛勤的

PayloadLen只有7位,换到无符号整型的话独有0到127的取值,这么小的数值当然无法描述相当大的多少,由此规定当数码长度小于或等于125时候它才作为数据长度的陈述,借使这一个值为126,则时候背后的七个字节来存款和储蓄数据长度,要是为127则用前边多个字节来积累数据长度

Masking-key掩码

下边贴出剖析数据帧的代码

JavaScript

function decodeDataFrame(e) { var i = 0, j,s, frame = { FIN: e[i] >> 7, Opcode: e[i ] & 15, Mask: e[i] >> 7, PayloadLength: e[i ] & 0x7F }; if(frame.PayloadLength === 126) { frame.PayloadLength = (e[i ] << 8) e[i ]; } if(frame.PayloadLength === 127) { i = 4; frame.PayloadLength = (e[i ] << 24) (e[i ] << 16) (e[i ] << 8)

  • e[i ]; } if(frame.Mask) { frame.MaskingKey = [e[i ], e[i ], e[i ], e[i ]]澳门新萄京,; for(j = 0, s = []; j < frame.PayloadLength; j ) { s.push(e[i j] ^ frame.MaskingKey[j%4]); } } else { s = e.slice(i, i frame.PayloadLength); } s = new Buffer(s); if(frame.Opcode === 1) { s = s.toString(); } frame.PayloadData = s; return frame; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function decodeDataFrame(e) {
var i = 0,
j,s,
frame = {
FIN: e[i] >> 7,
Opcode: e[i ] & 15,
Mask: e[i] >> 7,
PayloadLength: e[i ] & 0x7F
};
 
if(frame.PayloadLength === 126) {
frame.PayloadLength = (e[i ] << 8) e[i ];
}
 
if(frame.PayloadLength === 127) {
i = 4;
frame.PayloadLength = (e[i ] << 24) (e[i ] << 16) (e[i ] << 8) e[i ];
}
 
if(frame.Mask) {
frame.MaskingKey = [e[i ], e[i ], e[i ], e[i ]];
 
for(j = 0, s = []; j < frame.PayloadLength; j ) {
s.push(e[i j] ^ frame.MaskingKey[j%4]);
}
} else {
s = e.slice(i, i frame.PayloadLength);
}
 
s = new Buffer(s);
 
if(frame.Opcode === 1) {
s = s.toString();
}
 
frame.PayloadData = s;
return frame;
}

下一场是浮动数据帧的

JavaScript

function encodeDataFrame(e) { var s = [], o = new Buffer(e.PayloadData), l = o.length; s.push((e.FIN << 7) e.Opcode); if(l < 126) { s.push(l); } else if(l < 0x10000) { s.push(126, (l&0xFF00) >> 8, l&0xFF); } else { s.push(127, 0, 0, 0, 0, (l&0xFF000000) >> 24, (l&0xFF0000) >> 16, (l&0xFF00) >> 8, l&0xFF); } return Buffer.concat([new Buffer(s), o]); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function encodeDataFrame(e) {
var s = [],
o = new Buffer(e.PayloadData),
l = o.length;
 
s.push((e.FIN << 7) e.Opcode);
 
if(l < 126) {
s.push(l);
} else if(l < 0x10000) {
s.push(126, (l&0xFF00) >> 8, l&0xFF);
} else {
s.push(127, 0, 0, 0, 0, (l&0xFF000000) >> 24, (l&0xFF0000) >> 16, (l&0xFF00) >> 8, l&0xFF);
}
 
return Buffer.concat([new Buffer(s), o]);
}

都以依照帧结构暗指图上的去管理,在此地不细讲,作品首要在下一些,如若对那块感兴趣的话能够移动web本领研商所~

 

三、websocket传输图片和websocket语音聊天室

正片环节到了,那篇作品最要害的或然展现一下websocket的局地施用情状

1、传输图片

大家先考虑传输图片的步调是怎么,首先服务器收到到客商端央求,然后读取图片文件,将二进制数据转发给客户端,顾客端怎么样管理?当然是应用FileReader对象了

先给客商端代码

JavaScript

var ws = new WebSocket("ws://xxx.xxx.xxx.xxx:8888"); ws.onopen = function(){ console.log("握手成功"); }; ws.onmessage = function(e) { var reader = new File里德r(); reader.onload = function(event) { var contents = event.target.result; var a = new Image(); a.src = contents; document.body.appendChild(a); } reader.readAsDataUTucsonL(e.data); };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var ws = new WebSocket("ws://xxx.xxx.xxx.xxx:8888");
 
ws.onopen = function(){
    console.log("握手成功");
};
 
ws.onmessage = function(e) {
    var reader = new FileReader();
    reader.onload = function(event) {
        var contents = event.target.result;
        var a = new Image();
        a.src = contents;
        document.body.appendChild(a);
    }
    reader.readAsDataURL(e.data);
};

接收到新闻,然后readAsDataUCRUISERL,直接将图纸base64增添到页面中

转到服务器端代码

JavaScript

fs.readdir("skyland", function(err, files) { if(err) { throw err; } for(var i = 0; i < files.length; i ) { fs.readFile('skyland/' files[i], function(err, data) { if(err) { throw err; } o.write(encodeImgFrame(data)); }); } }); function encodeImgFrame(buf) { var s = [], l = buf.length, ret = []; s.push((1 << 7) 2); if(l < 126) { s.push(l); } else if(l < 0x10000) { s.push(126, (l&0xFF00) >> 8, l&0xFF); } else { s.push(127, 0, 0, 0, 0, (l&0xFF000000) >> 24, (l&0xFF0000) >> 16, (l&0xFF00) >> 8, l&0xFF); } return Buffer.concat([new Buffer(s), buf]); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
fs.readdir("skyland", function(err, files) {
if(err) {
throw err;
}
for(var i = 0; i < files.length; i ) {
fs.readFile('skyland/' files[i], function(err, data) {
if(err) {
throw err;
}
 
o.write(encodeImgFrame(data));
});
}
});
 
function encodeImgFrame(buf) {
var s = [],
l = buf.length,
ret = [];
 
s.push((1 << 7) 2);
 
if(l < 126) {
s.push(l);
} else if(l < 0x10000) {
s.push(126, (l&0xFF00) >> 8, l&0xFF);
} else {
s.push(127, 0, 0, 0, 0, (l&0xFF000000) >> 24, (l&0xFF0000) >> 16, (l&0xFF00) >> 8, l&0xFF);
}
 
return Buffer.concat([new Buffer(s), buf]);
}

注意s.push((1 << 7) 2)这一句,这里非常直接把opcode写死了为2,对于Binary Frame,那样客商端接收到多少是不会尝试举行toString的,不然会报错~

代码很轻便,在此地向大家大饱眼福一下websocket传输图片的进程怎么着

测量检验非常多张图片,总共8.24M

一般说来静态能源服务器需求20s左右(服务器较远)

cdn需要2.8s左右

那我们的websocket格局吗??!

答案是一模二样供给20s左右,是否很失望……速度便是慢在传输上,并不是服务器读取图片,本机上一样的图纸能源,1s左右能够完成……那样看来数据流也无力回天冲破距离的限制进步传输速度

下边大家来探访websocket的另一个用法~

 

用websocket搭建语音聊天室

先来整治一下口音聊天室的效能

顾客步入频道随后从迈克风输入音频,然后发送给后台转载给频道里面的其余人,别的人接收到音信进行播放

看起来困难在七个地点,第3个是音频的输入,第二是接受到多少流进行广播

先说音频的输入,这里运用了HTML5的getUserMedia方法,不过注意了,本条点子上线是有白沙湾的,最后说,先贴代码

JavaScript

if (navigator.getUserMedia) { navigator.getUserMedia( { audio: true }, function (stream) { var rec = new SRecorder(stream); recorder = rec; }) }

1
2
3
4
5
6
7
8
if (navigator.getUserMedia) {
    navigator.getUserMedia(
        { audio: true },
        function (stream) {
            var rec = new SRecorder(stream);
            recorder = rec;
        })
}

首先个参数是{audio: true},只启用音频,然后创制了四个SRecorder对象,后续的操作基本上都在这几个指标上扩充。此时只要代码运维在地面包车型地铁话浏览器应该提示您是还是不是启用Mike风输入,分明未来就运维了

接下去大家看下SRecorder构造函数是什么,给出首要的一部分

JavaScript

var SRecorder = function(stream) { …… var context = new AudioContext(); var audioInput = context.createMediaStreamSource(stream); var recorder = context.createScriptProcessor(4096, 1, 1); …… }

1
2
3
4
5
6
7
var SRecorder = function(stream) {
    ……
   var context = new AudioContext();
    var audioInput = context.createMediaStreamSource(stream);
    var recorder = context.createScriptProcessor(4096, 1, 1);
    ……
}

奥迪(Audi)oContext是三个节奏上下文对象,有做过声音过滤处理的同校应该知道“一段音频到达扬声器进行播放在此之前,半路对其进展阻挠,于是大家就取得了节奏数据了,那几个拦截专门的学问是由window.奥迪oContext来做的,大家全数对旋律的操作都依照那一个目的”,大家能够经过奥迪oContext创立分裂的AudioNode节点,然后增加滤镜播放特别的音响

录音原理同样,大家也亟需走奥迪(Audi)oContext,可是多了一步对Mike风音频输入的选择上,并不是像在此之前管理音频一下用ajax乞请音频的ArrayBuffer对象再decode,Mike风的收受要求用到createMediaStreamSource方法,注意那些参数便是getUserMedia方法第4个参数的参数

更并且createScriptProcessor方法,它官方的演说是:

Creates a ScriptProcessorNode, which can be used for direct audio processing via JavaScript.

——————

满含下正是那么些点子是应用JavaScript去管理音频收集操作

好不轻易到点子搜罗了!胜利就在日前!

接下去让大家把迈克风的输入和节奏搜罗相连起来

JavaScript

audioInput.connect(recorder); recorder.connect(context.destination);

1
2
audioInput.connect(recorder);
recorder.connect(context.destination);

context.destination官方解释如下

The destination property of the AudioContext interface returns an AudioDestinationNoderepresenting the final destination of all audio in the context.

——————

context.destination重返代表在条件中的音频的末段目标地。

好,到了此时,大家还须要一个监听音频采撷的风云

JavaScript

recorder.onaudioprocess = function (e) { audioData.input(e.inputBuffer.getChannelData(0)); }

1
2
3
recorder.onaudioprocess = function (e) {
    audioData.input(e.inputBuffer.getChannelData(0));
}

audioData是七个指标,这么些是在网络找的,笔者就加了一个clear方法因为前面会用到,首要有万分encodeWAV方法相当的赞,别人实行了频仍的节奏压缩和优化,这一个最后会伴随完整的代码一同贴出来

那时总体客商走入频道随后从迈克风输入音频环节就早就成功啦,上边就该是向劳动器端发送音频流,稍微有一些蛋疼的来了,刚才大家说了,websocket通过opcode差异能够象征回去的多少是文本还是二进制数据,而我们onaudioprocess中input进去的是数组,最终播放音响要求的是Blob,{type: ‘audio/wav’}的靶子,那样大家就务供给在发送在此以前将数组调换到WAV的Blob,此时就用到了下面说的encodeWAV方法

服务器就像相当粗略,只要转载就行了

地方测量试验确实可以,可是天坑来了!将次第跑在服务器上时候调用getUserMedia方法提示笔者必需在一个有惊无险的条件,也等于必要https,那表示ws也必得换到wss……之所以服务器代码就从未采用大家团结互助包裹的拉手、剖判和编码了,代码如下

JavaScript

var https = require('https'); var fs = require('fs'); var ws = require('ws'); var userMap = Object.create(null); var options = { key: fs.readFileSync('./privatekey.pem'), cert: fs.readFileSync('./certificate.pem') }; var server = https.createServer(options, function(req, res) { res.writeHead({ 'Content-Type' : 'text/html' }); fs.readFile('./testaudio.html', function(err, data) { if(err) { return ; } res.end(data); }); }); var wss = new ws.Server({server: server}); wss.on('connection', function(o) { o.on('message', function(message) { if(message.indexOf('user') === 0) { var user = message.split(':')[1]; userMap[user] = o; } else { for(var u in userMap) { userMap[u].send(message); } } }); }); server.listen(8888);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var https = require('https');
var fs = require('fs');
var ws = require('ws');
var userMap = Object.create(null);
var options = {
    key: fs.readFileSync('./privatekey.pem'),
    cert: fs.readFileSync('./certificate.pem')
};
var server = https.createServer(options, function(req, res) {
    res.writeHead({
        'Content-Type' : 'text/html'
    });
 
    fs.readFile('./testaudio.html', function(err, data) {
        if(err) {
            return ;
        }
 
        res.end(data);
    });
});
 
var wss = new ws.Server({server: server});
 
wss.on('connection', function(o) {
    o.on('message', function(message) {
if(message.indexOf('user') === 0) {
    var user = message.split(':')[1];
    userMap[user] = o;
} else {
    for(var u in userMap) {
userMap[u].send(message);
    }
}
    });
});
 
server.listen(8888);

代码照旧非常粗略的,使用https模块,然后用了始于说的ws模块,userMap是效仿的频道,只兑现转载的主干职能

应用ws模块是因为它优秀https实现wss实在是太有利了,和逻辑代码0顶牛

https的搭建在这里就不提了,重如若索要私钥、CS大切诺基证书具名和证件文件,感兴趣的同班能够领会下(可是不通晓的话在现网意况也用持续getUserMedia……)

上面是一体化的前端代码

JavaScript

var a = document.getElementById('a'); var b = document.getElementById('b'); var c = document.getElementById('c'); navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; var gRecorder = null; var audio = document.querySelector('audio'); var door = false; var ws = null; b.onclick = function() { if(a.value === '') { alert('请输入客商名'); return false; } if(!navigator.getUserMedia) { alert('抱歉您的装置无克罗地亚共和国语音聊天'); return false; } SRecorder.get(function (rec) { gRecorder = rec; }); ws = new WebSocket("wss://x.x.x.x:8888"); ws.onopen = function() { console.log('握手成功'); ws.send('user:' a.value); }; ws.onmessage = function(e) { receive(e.data); }; document.onkeydown = function(e) { if(e.keyCode === 65) { if(!door) { gRecorder.start(); door = true; } } }; document.onkeyup = function(e) { if(e.keyCode === 65) { if(door) { ws.send(gRecorder.getBlob()); gRecorder.clear(); gRecorder.stop(); door = false; } } } } c.onclick = function() { if(ws) { ws.close(); } } var SRecorder = function(stream) { config = {}; config.sampleBits = config.smapleBits || 8; config.sampleRate = config.sampleRate || (44100 / 6); var context = new 奥迪(Audi)oContext(); var audioInput = context.createMediaStreamSource(stream); var recorder = context.createScriptProcessor(4096, 1, 1); var audioData = { size: 0 //录音文件长度 , buffer: [] //录音缓存 , inputSampleRate: context.sampleRate //输入采集样品率 , inputSampleBits: 16 //输入采集样品数位 8, 16 , outputSampleRate: config.sampleRate //输出采集样品率 , oututSampleBits: config.sampleBits //输出采集样品数位 8, 16 , clear: function() { this.buffer = []; this.size = 0; } , input: function (data) { this.buffer.push(new Float32Array(data)); this.size = data.length; } , compress: function () { //合并压缩 //合并 var data = new Float32Array(this.size); var offset = 0; for (var i = 0; i < this.buffer.length; i ) { data.set(this.buffer[i], offset); offset = this.buffer[i].length; } //压缩 var compression = parseInt(this.inputSampleRate / this.outputSampleRate); var length = data.length / compression; var result = new Float32Array(length); var index = 0, j = 0; while (index < length) { result[index] = data[j]; j = compression; index ; } return result; } , encodeWAV: function () { var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate); var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits); var bytes = this.compress(); var dataLength = bytes.length * (sampleBits / 8); var buffer = new ArrayBuffer(44 dataLength); var data = new DataView(buffer); var channelCount = 1;//单声道 var offset = 0; var writeString = function (str) { for (var i = 0; i < str.length; i ) { data.setUint8(offset i, str.charCodeAt(i)); } }; // 能源沟通文件标识符 writeString('奥德赛IFF'); offset = 4; // 下个地点开首到文件尾总字节数,即文件大小-8 data.setUint32(offset, 36 dataLength, true); offset = 4; // WAV文件注明 writeString('WAVE'); offset = 4; // 波形格式标记 writeString('fmt '); offset = 4; // 过滤字节,一般为 0x10 = 16 data.setUint32(offset, 16, true); offset = 4; // 格式连串 (PCM格局采样数据) data.setUint16(offset, 1, true); offset = 2; // 通道数 data.setUint16(offset, channelCount, true); offset = 2; // 采集样品率,每秒样本数,表示每一个通道的播放速度 data.setUint32(offset, sampleRate, true); offset = 4; // 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8 data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true); offset = 4; // 快数据调治数 采集样品二回占用字节数 单声道×每样本的数量位数/8 data.setUint16(offset, channelCount * (sampleBits / 8), true); offset = 2; // 每样本数量位数 data.setUint16(offset, sampleBits, true); offset = 2; // 数据标记符 writeString('data'); offset = 4; // 采集样品数据总量,即数据总大小-44 data.setUint32(offset, dataLength, true); offset = 4; // 写入采集样品数据 if (sampleBits === 8) { for (var i = 0; i < bytes.length; i , offset ) { var s = Math.max(-1, Math.min(1, bytes[i])); var val = s < 0 ? s * 0x8000 : s * 0x7FFF; val = parseInt(255 / (65535 / (val 32768))); data.setInt8(offset, val, true); } } else { for (var i = 0; i < bytes.length; i , offset = 2) { var s = Math.max(-1, Math.min(1, bytes[i])); data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true); } } return new Blob([data], { type: 'audio/wav' }); } }; this.start = function () { audioInput.connect(recorder); recorder.connect(context.destination); } this.stop = function () { recorder.disconnect(); } this.getBlob = function () { return audioData.encodeWAV(); } this.clear = function() { audioData.clear(); } recorder.onaudioprocess = function (e) { audioData.input(e.inputBuffer.getChannelData(0)); } }; SRecorder.get = function (callback) { if (callback) { if (navigator.getUserMedia) { navigator.getUserMedia( { audio: true }, function (stream) { var rec = new SRecorder(stream); callback(rec); }) } } } function receive(e) { audio.src = window.URL.createObjectURL(e); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
var a = document.getElementById('a');
var b = document.getElementById('b');
var c = document.getElementById('c');
 
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
 
var gRecorder = null;
var audio = document.querySelector('audio');
var door = false;
var ws = null;
 
b.onclick = function() {
    if(a.value === '') {
        alert('请输入用户名');
        return false;
    }
    if(!navigator.getUserMedia) {
        alert('抱歉您的设备无法语音聊天');
        return false;
    }
 
    SRecorder.get(function (rec) {
        gRecorder = rec;
    });
 
    ws = new WebSocket("wss://x.x.x.x:8888");
 
    ws.onopen = function() {
        console.log('握手成功');
        ws.send('user:' a.value);
    };
 
    ws.onmessage = function(e) {
        receive(e.data);
    };
 
    document.onkeydown = function(e) {
        if(e.keyCode === 65) {
            if(!door) {
                gRecorder.start();
                door = true;
            }
        }
    };
 
    document.onkeyup = function(e) {
        if(e.keyCode === 65) {
            if(door) {
                ws.send(gRecorder.getBlob());
                gRecorder.clear();
                gRecorder.stop();
                door = false;
            }
        }
    }
}
 
c.onclick = function() {
    if(ws) {
        ws.close();
    }
}
 
var SRecorder = function(stream) {
    config = {};
 
    config.sampleBits = config.smapleBits || 8;
    config.sampleRate = config.sampleRate || (44100 / 6);
 
    var context = new AudioContext();
    var audioInput = context.createMediaStreamSource(stream);
    var recorder = context.createScriptProcessor(4096, 1, 1);
 
    var audioData = {
        size: 0          //录音文件长度
        , buffer: []     //录音缓存
        , inputSampleRate: context.sampleRate    //输入采样率
        , inputSampleBits: 16       //输入采样数位 8, 16
        , outputSampleRate: config.sampleRate    //输出采样率
        , oututSampleBits: config.sampleBits       //输出采样数位 8, 16
        , clear: function() {
            this.buffer = [];
            this.size = 0;
        }
        , input: function (data) {
            this.buffer.push(new Float32Array(data));
            this.size = data.length;
        }
        , compress: function () { //合并压缩
            //合并
            var data = new Float32Array(this.size);
            var offset = 0;
            for (var i = 0; i < this.buffer.length; i ) {
                data.set(this.buffer[i], offset);
                offset = this.buffer[i].length;
            }
            //压缩
            var compression = parseInt(this.inputSampleRate / this.outputSampleRate);
            var length = data.length / compression;
            var result = new Float32Array(length);
            var index = 0, j = 0;
            while (index < length) {
                result[index] = data[j];
                j = compression;
                index ;
            }
            return result;
        }
        , encodeWAV: function () {
            var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);
            var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);
            var bytes = this.compress();
            var dataLength = bytes.length * (sampleBits / 8);
            var buffer = new ArrayBuffer(44 dataLength);
            var data = new DataView(buffer);
 
            var channelCount = 1;//单声道
            var offset = 0;
 
            var writeString = function (str) {
                for (var i = 0; i < str.length; i ) {
                    data.setUint8(offset i, str.charCodeAt(i));
                }
            };
 
            // 资源交换文件标识符
            writeString('RIFF'); offset = 4;
            // 下个地址开始到文件尾总字节数,即文件大小-8
            data.setUint32(offset, 36 dataLength, true); offset = 4;
            // WAV文件标志
            writeString('WAVE'); offset = 4;
            // 波形格式标志
            writeString('fmt '); offset = 4;
            // 过滤字节,一般为 0x10 = 16
            data.setUint32(offset, 16, true); offset = 4;
            // 格式类别 (PCM形式采样数据)
            data.setUint16(offset, 1, true); offset = 2;
            // 通道数
            data.setUint16(offset, channelCount, true); offset = 2;
            // 采样率,每秒样本数,表示每个通道的播放速度
            data.setUint32(offset, sampleRate, true); offset = 4;
            // 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8
            data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true); offset = 4;
            // 快数据调整数 采样一次占用字节数 单声道×每样本的数据位数/8
            data.setUint16(offset, channelCount * (sampleBits / 8), true); offset = 2;
            // 每样本数据位数
            data.setUint16(offset, sampleBits, true); offset = 2;
            // 数据标识符
            writeString('data'); offset = 4;
            // 采样数据总数,即数据总大小-44
            data.setUint32(offset, dataLength, true); offset = 4;
            // 写入采样数据
            if (sampleBits === 8) {
                for (var i = 0; i < bytes.length; i , offset ) {
                    var s = Math.max(-1, Math.min(1, bytes[i]));
                    var val = s < 0 ? s * 0x8000 : s * 0x7FFF;
                    val = parseInt(255 / (65535 / (val 32768)));
                    data.setInt8(offset, val, true);
                }
            } else {
                for (var i = 0; i < bytes.length; i , offset = 2) {
                    var s = Math.max(-1, Math.min(1, bytes[i]));
                    data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
                }
            }
 
            return new Blob([data], { type: 'audio/wav' });
        }
    };
 
    this.start = function () {
        audioInput.connect(recorder);
        recorder.connect(context.destination);
    }
 
    this.stop = function () {
        recorder.disconnect();
    }
 
    this.getBlob = function () {
        return audioData.encodeWAV();
    }
 
    this.clear = function() {
        audioData.clear();
    }
 
    recorder.onaudioprocess = function (e) {
        audioData.input(e.inputBuffer.getChannelData(0));
    }
};
 
SRecorder.get = function (callback) {
    if (callback) {
        if (navigator.getUserMedia) {
            navigator.getUserMedia(
                { audio: true },
                function (stream) {
                    var rec = new SRecorder(stream);
                    callback(rec);
                })
        }
    }
}
 
function receive(e) {
    audio.src = window.URL.createObjectURL(e);
}

注意:按住a键说话,放开a键发送

和睦有尝试不按钮实时对讲,通过setInterval发送,但开掘杂音有点重,效果不好,这么些须求encodeWAV再一层的包裹,多去除意况杂音的机能,自个儿采用了更为便利的开关说话的方式

 

那篇小说里第一展望了websocket的前途,然后依照正规大家和煦尝尝分析和转换数据帧,对websocket有了越来越深一步的询问

终极经过五个demo看到了websocket的潜在的力量,关于语音聊天室的demo涉及的较广,没有接触过奥迪(Audi)oContext对象的同室最棒先了然下奥迪(Audi)oContext

小谈起此地就终止啦~有哪些主见和难点招待大家提议来一同商酌探寻~

 

1 赞 11 收藏 3 评论

澳门新萄京 6

ubuntu下python2.76

windows python 2.79, chrome37 firefox35通过

澳门新萄京:websocket索求其与语音。代码是在外人(cddn有人提问)基础上改的, 首要改变了parsedata和sendmessage那2个函数.

改代码参考下边了这段文书档案. 首即使第5条, 发送的数目长度分别是 8bit和 16bit和 64 bit(即 127, 65535,和2^64-1)二种意况 

出殡和接收是一律的, 举例

1.尺寸小于125时(由于采纳126, 127用作标记位.)

  1. 数据长度在128-65525之内时, Payload Length位设为126, 前边额外使用16bit表示长度(前面包车型地铁126不再是长度的一有的)

3.数据长度在65526-2^64-1以内时, Payload Length位设为127, 前面额外使用64bit代表长度(前边的127不再是长度的一片段)

 

  1. Fin (bit 0): determines if this is the last frame in the message. This would be set to 1 on the end of a series of frames, or in a single-frame message, it would be set to 1 as it is both the first and last frame.
  2. RSV1, RSV2, RSV3 (bits 1-3): these three bits are reserved for websocket extensions, and should be 0 unless a specific extension requires the use of any of these bytes.
  3. Opcode (bits 4-7): these four bits deterimine the type of the frame. Control frames communicate WebSocket state, while non-control frames communicate data. The various types of codes include:

    1. x0: continuation frame; this frame contains data that should be appended to the previous frame
    2. x1: text frame; this frame (and any following) contains text
    3. x2: binary frame; this frame (and any following) contains binary data
    4. x3 - x7: non-control reserved frames; these are reserved for possible websocket extensions
    5. x8: close frame; this frame should end the connection
    6. x9: ping frame
    7. xA: pong frame
    8. xB - xF: control reserved frames
  4. Mask (bit 8): this bit determines whether this specific frame uses a mask or not.

  5. Payload Length (bits 9-15, or 16-31, or 16-79): these seven bytes determine the payload length. If the length is 126, the length is actually determined by bits 16 through 31 (that is, the following two bytes). If the length is 127, the length is actually determined by bits 16 through 79 (that is, the following eight bytes).
  6. Masking Key (the following four bytes): this represents the mask, if the Mask bit is set to 1.
  7. Payload Data (the following data): finally, the data. The payload data may be sent over multiple frames; we know the size of the entire message by the payload length that was sent, and can append data together to form a single message until we receive the message with the Fin flag. Each consecutive payload, if it exists, will contain the 0 “continuation frame” opcode.

 

 

 

服务器

 

[python] view plaincopy澳门新萄京 7澳门新萄京 8

 

  1. #coding=utf8  
  2. #!/usr/bin/python  
  3.   
  4.   
  5. import struct,socket  
  6. import hashlib  
  7. import threading,random  
  8. import time  
  9. import struct  
  10. from base64 import b64encode, b64decode  
  11.   
  12.   
  13. connectionlist = {}  
  14. g_code_length = 0  
  15. g_header_length = 0  
  16.   
  17.   
  18. def hex2dec(string_num):  
  19.     return str(int(string_num.upper(), 16))  
  20.   
  21.   
  22.   
  23.   
  24. def get_datalength(msg):  
  25.     global g_code_length  
  26.     global g_header_length      
  27.       
  28.     print (len(msg))  
  29.     g_code_length = ord(msg[1]) & 127  
  30.     received_length = 0;  
  31.     if g_code_length == 126:  
  32.         #g_code_length = msg[2:4]  
  33.         #g_code_length = (ord(msg[2])<<8)   (ord(msg[3]))  
  34.         g_code_length = struct.unpack('>H', str(msg[2:4]))[0]  
  35.         g_header_length = 8  
  36.     elif g_code_length == 127:  
  37.         #g_code_length = msg[2:10]  
  38.         g_code_length = struct.unpack('>Q', str(msg[2:10]))[0]  
  39.         g_header_length = 14  
  40.     else:  
  41.         g_header_length = 6  
  42.     g_code_length = int(g_code_length)  
  43.     return g_code_length  
  44.           
  45. def parse_data(msg):  
  46.     global g_code_length  
  47.     g_code_length = ord(msg[1]) & 127  
  48.     received_length = 0;  
  49.     if g_code_length == 126:  
  50.         g_code_length = struct.unpack('>H', str(msg[2:4]))[0]  
  51.         masks = msg[4:8]  
  52.         data = msg[8:]  
  53.     elif g_code_length == 127:  
  54.         g_code_length = struct.unpack('>Q', str(msg[2:10]))[0]  
  55.         masks = msg[10:14]  
  56.         data = msg[14:]  
  57.     else:  
  58.         masks = msg[2:6]  
  59.         data = msg[6:]  
  60.   
  61.   
  62.     i = 0  
  63.     raw_str = ''  
  64.   
  65.   
  66.     for d in data:  
  67.         raw_str  = chr(ord(d) ^ ord(masks[i%4]))  
  68.         i  = 1  
  69.   
  70.   
  71.     print (u"总参谋长度是:%d" % int(g_code_length))      
  72.     return raw_str    
  73.   
  74.   
  75. def sendMessage(message):  
  76.     global connectionlist  
  77.       
  78.     message_utf_8 = message.encode('utf-8')  
  79.     for connection in connectionlist.values():  
  80.         back_str = []  
  81.         back_str.append('x81')  
  82.         data_length = len(message_utf_8)  
  83.   
  84.   
  85.         if data_length <= 125:  
  86.             back_str.append(chr(data_length))  
  87.         elif data_length <= 65535 :  
  88.             back_str.append(struct.pack('b', 126))  
  89.             back_str.append(struct.pack('>h', data_length))  
  90.             #back_str.append(chr(data_length >> 8))  
  91.             #back_str.append(chr(data_length & 0xFF))  
  92.             #a = struct.pack('>h', data_length)  
  93.             #b = chr(data_length >> 8)  
  94.             #c = chr(data_length & 0xFF)  
  95.         elif data_length <= (2^64-1):  
  96.             #back_str.append(chr(127))  
  97.             back_str.append(struct.pack('b', 127))  
  98.             back_str.append(struct.pack('>q', data_length))  
  99.             #back_str.append(chr(data_length >> 8))  
  100.             #back_str.append(chr(data_length & 0xFF))        
  101.         else :  
  102.                 print (u'太长了')          
  103.         msg = ''  
  104.         for c in back_str:  
  105.             msg  = c;  
  106.         back_str = str(msg)     message_utf_8#.encode('utf-8')      
  107.         #connection.send(str.encode(str(u"x00%sxFFnn" % message))) #其一是旧版  
  108.         #print (u'send message:'    message)  
  109.         if back_str != None and len(back_str) > 0:  
  110.             print (back_str)  
  111.             connection.send(back_str)  
  112.   
  113.   
  114. def deleteconnection(item):  
  115.     global connectionlist  
  116.     del connectionlist['connection' item]  
  117.   
  118.   
  119. class WebSocket(threading.Thread):#继承Thread  
  120.   
  121.   
  122.     GUID = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"  
  123.   
  124.   
  125.     def __init__(self,conn,index,name,remote, path="/"):  
  126.         threading.Thread.__init__(self)#初阶化父类Thread  
  127.         self.conn = conn  
  128.         self.index = index  
  129.         self.name = name  
  130.         self.remote = remote  
  131.         self.path = path  
  132.         self.buffer = ""  
  133.         self.buffer_utf8 = ""  
  134.         self.length_buffer = 0  
  135.     def run(self):#重载Thread的run  
  136.         print('Socket%s Start!' % self.index)  
  137.         headers = {}  
  138.         self.handshaken = False  
  139.   
  140.   
  141.         while True:  
  142.             if self.handshaken == False:  
  143.                 print ('Socket%s Start Handshaken with %s!' % (self.index,self.remote))  
  144.                 self.buffer  = bytes.decode(self.conn.recv(1024))  
  145.   
  146.   
  147.                 if self.buffer.find('rnrn') != -1:  
  148.                     header, data = self.buffer.split('rnrn', 1)  
  149.                     for line in header.split("rn")[1:]:  
  150.                         key, value = line.split(": ", 1)  
  151.                         headers[key] = value  
  152.   
  153.   
  154.                     headers["Location"] = ("ws://%s%s" %(headers["Host"], self.path))  
  155.                     key = headers['Sec-WebSocket-Key']  
  156.                     token = b64encode(hashlib.sha1(str.encode(str(key   self.GUID))).digest())  
  157.   
  158.   
  159.                     handshake="HTTP/1.1 101 Switching Protocolsrn"  
  160.                         "Upgrade: websocketrn"  
  161.                         "Connection: Upgradern"  
  162.                         "Sec-WebSocket-Accept: " bytes.decode(token) "rn"  
  163.                         "WebSocket-Origin: " str(headers["Origin"]) "rn"  
  164.                         "WebSocket-Location: " str(headers["Location"]) "rnrn"  
  165.   
  166.   
  167.                     self.conn.send(str.encode(str(handshake)))  
  168.                     self.handshaken = True    
  169.                     print ('Socket %s Handshaken with %s success!' %(self.index, self.remote))    
  170.                     sendMessage(u'Welcome, '   self.name   ' !')    
  171.                     self.buffer_utf8 = ""  
  172.                     g_code_length = 0                      
  173.   
  174.   
  175.             else:  
  176.                 global g_code_length  
  177.                 global g_header_length  
  178.                 mm=self.conn.recv(128)  
  179.                 if len(mm) <= 0:  
  180.                     continue  
  181.                 if g_code_length == 0:  
  182.                     get_datalength(mm)  
  183.                 #收受的长短  
  184.                 self.length_buffer = self.length_buffer   len(mm)  
  185.                 self.buffer = self.buffer   mm  
  186.                 if self.length_buffer - g_header_length < g_code_length :  
  187.                     continue  
  188.                 else :  
  189.                     self.buffer_utf8 = parse_data(self.buffer) #utf8                  
  190.                     msg_unicode = str(self.buffer_utf8).decode('utf-8', 'ignore') #unicode  
  191.                     if msg_unicode=='quit':  
  192.                         print (u'Socket%s Logout!' % (self.index))  
  193.                         nowTime = time.strftime('%H:%M:%S',time.localtime(time.time()))  
  194.                         sendMessage(u'%s %s say: %s' % (nowTime, self.remote, self.name ' Logout'))                        
  195.                         deleteconnection(str(self.index))  
  196.                         self.conn.close()  
  197.                         break #脱离线程  
  198.                     else:  
  199.                         #print (u'Socket%s Got msg:%s from %s!' % (self.index, msg_unicode, self.remote))  
  200.                         nowTime = time.strftime(u'%H:%M:%S',time.localtime(time.time()))  
  201.                         sendMessage(u'%s %s say: %s' % (nowTime, self.remote, msg_unicode))    
  202.                     #重置buffer和bufferlength  
  203.                     self.buffer_utf8 = ""  
  204.                     self.buffer = ""  
  205.                     g_code_length = 0  
  206.                     self.length_buffer = 0  
  207.             self.buffer = ""  
  208.   
  209.   
  210. class WebSocketServer(object):  
  211.     def __init__(self):  
  212.         self.socket = None  
  213.     def begin(self):  
  214.         print( 'WebSocketServer Start!')  
  215.         self.socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)  
  216.         self.socket.setsockopt(socket.SOL_SOCKET,socket.SO_REUSEADDR,1)  
  217.         self.socket.bind(("127.0.0.1",12345))  
  218.         self.socket.listen(50)  
  219.   
  220.   
  221.         global connectionlist  
  222.   
  223.   
  224.         i=0  
  225.         while True:  
  226.             connection, address = self.socket.accept()  
  227.   
  228.   
  229.             username=address[0]       
  230.             newSocket = WebSocket(connection,i,username,address)  
  231.             newSocket.start() #开端线程,实践run函数  
  232.             connectionlist['connection' str(i)]=connection  
  233.             i = i   1  
  234.   
  235.   
  236. if __name__ == "__main__":  
  237.     server = WebSocketServer()  
  238.     server.begin()  

客户端 

 

测试了chrome37, firefox35

 

[html] view plaincopy澳门新萄京 9澳门新萄京 10

 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>WebSocket</title>  
  5.   
  6.     <style>  
  7.         html, body {  
  8.             font: normal 0.9em arial, helvetica;  
  9.         }  
  10.   
  11.         #log {  
  12.             width: 440px;  
  13.             height: 200px;  
  14.             border: 1px solid #7F9DB9;  
  15.             overflow: auto;  
  16.         }  
  17.   
  18.         #msg {  
  19.             width: 330px;  
  20.         }  
  21.     </style>  
  22.   
  23.     <script>  
  24.         var socket;  
  25.   
  26.         function init() {  
  27.             var host = "ws://127.0.0.1:12345/";  
  28.             try {  
  29.                 socket = new WebSocket(host);  
  30.                 socket.onopen = function (msg) {  
  31.                     log('Connected');  
  32.                 };  
  33.                 socket.onmessage = function (msg) {  
  34.                     log(msg.data);  
  35.                 };  
  36.                 socket.onclose = function (msg) {  
  37.                     log("Lose Connection!");  
  38.                 };  
  39.             }  
  40.             catch (ex) {  
  41.                 log(ex);  
  42.             }  
  43.             $("msg").focus();  
  44.         }  
  45.   
  46.         function send() {  
  47.             var txt, msg;  
  48.             txt = $("msg");  
  49.             msg = txt.value;  
  50.             if (!msg) {  
  51.                 alert("Message can not be empty");  
  52.                 return;  
  53.             }  
  54.             txt.value = "";  
  55.             txt.focus();  
  56.             try {  
  57.                 socket.send(msg);  
  58.             } catch (ex) {  
  59.                 log(ex);  
  60.             }  
  61.         }  
  62.   
  63.         window.onbeforeunload = function () {  
  64.             try {  
  65.                 socket.send('quit');  
  66.                 socket.close();  
  67.                 socket = null;  
  68.             }  
  69.             catch (ex) {  
  70.                 log(ex);  
  71.             }  
  72.         };  
  73.   
  74.   
  75.         function $(id) {  
  76.             return document.getElementById(id);  
  77.         }  
  78.         function log(msg) {  
  79.             $("log").innerHTML  = "<br>"   msg;  
  80.         }  
  81.         function onkey(event) {  
  82.             if (event.keyCode == 13) {  
  83.                 send();  
  84.             }  
  85.         }  
  86.     </script>  
  87.   
  88. </head>  
  89.   
  90.   
  91. <body onload="init()">  
  92. <h3>WebSocket</h3>  
  93. <br><br>  
  94.   
  95. <div id="log"></div>  
  96. <input id="msg" type="textbox" onkeypress="onkey(event)"/>  
  97. <button onclick="send()">发送</button>  
  98. </body>  
  99.   
  100. </html>  

参考:用Python达成一个轻易易行的WebSocket服务器

 

 

鉴于应用125, 126, 127用作标记位.

参照地址

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:澳门新萄京:websocket索求其与语音

上一篇:澳门新萄京:来探问机智的前端童鞋怎么防盗, 下一篇:没有了
猜你喜欢
热门排行
精彩图文