ws.io 详细介绍
A simple wrap to node.js ws module and then we can use it in a manner like socket.io. It's really easy to use socket.io but it doesn't support Blob yet. So I write a simple wrap to ws module for this purpose. This is also a part of works from a contest by ithelp.ithome.com.tw.
Features:
-
trnasfer Blob/ArrayBuffer by put it in an object and emit it just as socket.io
-
broadcast to all but not me
-
emit to specified peer by socket.to(socket.id).emit('event', data)
-
join/leave/in room
-
in-memory store
Limits:
-
can only send one Blob/ArrayBuffer within one emit
-
the Blob/ArrayBuffer object must be a property of the emitting object in the first level, no deeper
-
no configuration support
-
no 3rd party data store support
-
cannot scale (due to current sockets management and store design)
-
client support is now through a static url: /ws.io/ws.io.js
install
npm install ws.iousage
a simple echo server. (echo.js)
var app = require('http').createServer(handler),
io = require('./ws.io').listen(app);
app.listen(8443);
function handler (req, res) {
res.setHeader('Content-Type', 'text/html');
res.writeHead(200);
res.end(
"<!DOCTYPE html>"+
"<html>"+
"<head>"+
"<script src='/ws.io/ws.io.js'></script>"+
"<script>"+
"var socket = io.connect('ws://localhost:8443');"+
"socket.on('echo', function(data) {"+
" alert(data);"+
"});"+
"</script>"+
"<body>"+
"<button id='echo'>echo</button>"+
"</body>"+
"</html>"+
"<script>"+
"var button = document.getElementById('echo');"+
"button.onclick = function() {"+
" socket.emit('echo', 'hello echo server.');"+
"}"+
"</script>"
);
}
io.sockets.on('connection', function (socket) {
socket.on('echo', function(data) {
socket.emit('echo', data);
});
});a simple blob sharing through file api. (blob.js)
var fs = require('fs'),
url = require('url'),
app = require('http').createServer(function(req, res) {
res.setHeader('Content-Type', 'text/html');
res.writeHead(200);
res.end(
"<!DOCTYPE html>"+
"<html>"+
"<meta charset='utf-8'>"+
"<head>"+
"<style>"+
"#panel {"+
" border: solid 1px #336699;"+
" line-height: 20px;"+
" vertical-align: middle;"+
" padding: 5px;"+
" border-radius: 5px;"+
"}"+
"</style>"+
"<script src='/ws.io/ws.io.js'></script>"+
"</head>"+
"<body>"+
"<input type='file' id='files'><br>"+
"<div id='panel'><ul id='list'></ul></div>"+
"</body>"+
"</html>"+
"<script>"+
"var files = document.getElementById('files');"+
"var socket = io.connect('ws://localhost:8443');"+
"function getUrl() {"+
" if(!!window.URL) {"+
" return window.URL;"+
" }"+
" if(!!window.webkitURL) {"+
" return window.webkitURL;"+
" }"+
"}"+
""+
"files.addEventListener('change', function(e) {"+
" var URL = getUrl();"+
" if(files.files.length>0) {"+
" var file = files.files[0];"+
" if(file.type==='') {"+
" alert('File type unknown. Process stopped.');"+
" return false;"+
" }"+
" var src = URL.createObjectURL(file);"+
" var a = document.createElement('a');"+
" a.href = src;"+
" a.innerHTML = file.name;"+
" a.target = '_blank';"+
" var li = document.createElement('li');"+
" li.appendChild(a);"+
" document.getElementById('list').appendChild(li);"+
" socket.emit('share', {filename: file.name, type: file.type, file:file});"+
" }"+
"});"+
"var fileinfo;"+
"socket.on('share', function(data) {"+
" var URL = getUrl();"+
" var a = document.createElement('a');"+
" var file = new Blob([data.file], {type:data.type});"+
" a.href = URL.createObjectURL(file);"+
" a.innerHTML = data.filename;"+
" a.target = '_blank';"+
" var li = document.createElement('li');"+
" li.appendChild(a);"+
" document.getElementById('list').appendChild(li);"+
"});"+
"</script>"
);
}),
io = require('ws.io').listen(app);
io.sockets.on('connection', function(socket) {
socket.on('share', function(data) {
socket.broadcast.emit('share', data);
});
});
app.listen(8443);博主花大量时间和精力整理了大前端最新前端视频教程，省去大家找资源的时间
有兴趣的可以点击下方文字访问博主淘宝网（感谢支持）或直接联系博主QQ：184009766