前几天，一个同事说他写的web静态服务器不支持音视频的播放，现简单实现一下。
原理：实现http1.1协议的range部分。
其实这一点都不神秘，我们常用的下载工具，如迅雷，下载很快，还支持断点续传，就是利用http协议的range和多线程实现的。假如下载一个1MB的文件，如果开一个线程下载，那么只能从头到尾依次下载这个文件，这样不可能提升速度。通常，下载工具会开很多个线程，这里暂且假设是4个，然后这4个线程同时分别下载这1MB的0~255KB、256-511KB、512~767KB和768~1024KB，很显然，理论上速度提升了4倍。
那么怎么将服务器上的1MB文件分成4份呢？这就是range的强大功能了！
当请求下载文件时，带有
Range: bytes=0-255[,256-511] //这里表示0~255个字节，如果请求多个分段，用逗号隔开
服务器响应请求时发现头部带有Range，那么做出响应：
Content-Range: bytes 0-255/789 //789就是整个文件的大小了
Content-Length: 256
同时status变为，而不是200，并发送这一段数据给客户端，这样客户端接收到的数据就是整个文件的一部分了！
range的请求头还可以是：
- Range: bytes=0- //整个文件
- Range: bytes=-200 //最后200个字节
- Range: bytes=200- //200字节后的所有字节
- Range: bytes=0-0,-1 //第一、最后一个字节
看代码如何实现
//判断是请求头中是否有range部分
if(request.headers.range){
var size = stat.size;//获取文件大小
//暂且写在这里
function getRange(){
var range = request.headers.range; if(range.indexOf(",") != -1){//这里只处理了一个分段的情况
return false;
}
//range大约长这样子：bytes=0-255[,256-511]
var parts = range.replace(/bytes=/, '').split("-");
var partiaStart = parts[0];
var partialEnd = parts[1]; var start = parseInt(partiaStart);//起始位置
//如果是bytes=0-，就是整个文件大小了
var end = partialEnd ? parseInt(partialEnd) : size - 1; if(isNaN(start) || isNaN(end)) return false;
//分段的大小
var chunkSize = end - start + 1; return {'start': start, 'end': end, 'chunkSize': chunkSize};
} var rangeData = getRange();
if(rangeData){
//createReadStream这东西原生支持range，是不是很爽？
var raw = fs.createReadStream(realPath, {'start': rangeData.start, 'end': rangeData.end});
//状态码当然是206了
response.writeHead(206, 'Partial Content', {
'Content-Type' : contentType,
'Content-Range' : 'bytes ' + rangeData.start + '-' + rangeData.end + '/' + size,
'Content-Length' : rangeData.chunkSize
});
raw.pipe(response);
}else{
response.writeHead(416, "not ok!");
response.end();
}
}else{
//状态码200
}
大概就是这样子，其他部分略去。
用html5的audio标签试验下mp3的播放：
<audio src="audio/test.mp3" controls="controls" preload="auto" autoplay="autoplay"></audio>
得到的请求和响应头如下：
下图是MP3文件加载到6MB时的截图，这时音乐已经播放超过一半了，所以可不是加载完成才播放的。
这样web服务器就实现range功能，可以处理多媒体文件了，当然只是非常简单的实现，想了解更多可以查阅W3的网站（前面说的下载、断点续传什么的就不验证了，客户端也搞不明白）