入口:
https://github.com/edwardwohaijun/simple-filer
技术要求:
- 客户端暂时只支持 Chrome 浏览器
- 服务端需要支持 wesocket 的 webServer 即可
安装:
npm install simple-filer
使用:
客户端:
var ws = new WebSocket('wss://127.0.0.1:8443');
var Filer = require('simple-filer')
var filer = new Filer({myID: 123, signalingChannel: ws})
ws.onmessage = msg => {
var msgObj = JSON.parse(msg.data);
switch (msgObj.msgType) {
case "signaling":
filer.handleSignaling(msgObj);
break;
}
};
filer.on('task', function(task) { // when you are about to send/receive a file, newTask event is fired
console.log('new task: ', task); // this is where you can add task info on the webpage
});
filer.on('progress', function({fileID, progress, fileName, fileURL}){ // file transfer progress event
console.log('file transfer progress: ', fileName, ': ', progress)
});
filer.on('status', function({fileID, status}){ // file transfer status: pending/sending/receiving/done/removed
console.log('new status for ', fileID, ': ', status)
});
初始化完 filer object 后, 定义一些 event handlers, 然后当 websocket 收到 message 后, 如果是"signaling"的类型, 则丢给 filer.handleSignaling(msgObj)去执行即可.
服务端:
wss.on('connection', function(ws){
ws.on('message', msg => {
var msgObj = JSON.parse(msg);
switch (msgObj.msgType) {
case "signaling":
var targetClient = users[msgObj.to];
targetClient.send(msg) // forward the signaling data to the specified user
break;
default: console.log('Oops. unknown msg: ', msgObj)
}
});
})
WebSocket 读取客户端发来的 message, 解析后, 如果 msgType 是"signaling", 则: 转发给"msgObj.to"中指定的接受方.
Example app
通过 npm 安装后, 目录中附带了一个完整的例子, 只需: cd node_modules/simple-filer/example npm install npm run start 打开 Chrome 浏览器的 2 个窗口, 进入 httpS://127.0.0.1:8443 即可实现双方互传文件. 这里有个动态截图显示运行时的界面.
如果想在本地局域网中运行, 则编辑 example/public/javascripts/bundle.js
文件, 查找 var ws = new WebSocket
, 修改为你的本机 IP, 再 restart app 即可. 要想在你自己的 web 项目中嵌入该 library, 则可以参考example/public/javascripts/src/demo.js
文件(总共就 150 行).
遇到问题怎么办
你可以直接在 github 上提 issue, 也可以在本人的chat web app上发言(无需注册), 我已经为该 simple-filer 项目建立了一个讨论组.
看起来很棒的样子,收藏一下
mark
客户端点对点是使用了WebRTC吗?还是什么其它方案?
是用WebRTC的data channel传输文件的二进制数据, 但没有用JavaScript的原生API, 而是用了一个第三方的库: simple-peer
@edwardwohaijun 嗯,挺给力的。已star
mark and star