下記のサイトを参考にして，
ファイルをサーバーに送るコードを書いてみた。送ったファイルへのリンクが表示される。まだ消していない余分なコードが残っている。express のフォルダー公開の機能も使用する。
サーバー側のコード：app.js
// S01. 必要なモジュールを読み込む
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var fs = require('fs');
// S02. HTTPサーバを生成する
/*
var server = http.createServer(function(req, res) {
res.writeHead(200, {'Content-Type' : 'text/html'});
res.end(fs.readFileSync(__dirname + '/index.html', 'utf-8'));
}).listen(3000); // ポート競合の場合は値を変更
*/
//static ミドルウエア設定を追加
app.use(express.static('public'));
//ルーティング設定
app.get('/', function (req, res) {
res.send('Hello World');
});
//app.listen(3000);
http.listen(3000, function () {console.log('Server running at http://localhost:3000/');});
// S03. HTTPサーバにソケットをひも付ける（WebSocket有効化）
//var io = socketio.listen(server);
// S04. connectionイベント・データを受信する
io.on('connection', function(socket) {
var name;
// S05. client_to_serverイベント・データを受信する
socket.on('client_to_server', function(data) {
// S06. server_to_clientイベント・データを送信する
// io.emit('server_to_client', {value : data.value});
var moto = data.value;
var tmp = moto.replace(/^data:\w+\/\w+;base64,/, '');
var tmpBinary = new Buffer.from(tmp, 'base64');
var fileExtension = moto.toString().slice(moto.indexOf('/') + 1, moto.indexOf(';'));
var tmpDate = new Date();
var unixTime = Math.round(tmpDate.getTime() / 1000);
var tmpFileName = unixTime + '.' + fileExtension;
fs.writeFile('public/work/' + tmpFileName, tmpBinary,function (err) {
io.emit('server_to_client', {value : tmpFileName});
});
});
// S07. client_to_server_broadcastイベント・データを受信し、送信元以外に送信する
socket.on('client_to_server_broadcast', function(data) {
socket.broadcast.emit('server_to_client', {value : data.value});
});
// S08. client_to_server_personalイベント・データを受信し、送信元のみに送信する
socket.on('client_to_server_personal', function(data) {
var id = socket.id;
name = data.value;
var personalMessage = "あなたは、" + name + "さんとして入室しました。"
//io.to(id).emit('server_to_client', {value : personalMessage});
});
// S09. disconnectイベントを受信し、退出メッセージを送信する
socket.on('disconnect', function() {
if (name == 'undefined') {
console.log("未入室のまま、どこかへ去っていきました。");
} else {
var endMessage = name + "さんが退出しました。"
io.emit('server_to_client', {value : endMessage});
}
});
});
クライアント側のコード：index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>websocket-chat</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
</head>
<body>
<div class="container">
<h1>WebSocket</h1>
<form id="my_form">
<input id="ifName" name="ifName" type="file" ><br>
</form>
<div id="chatLogs"></div>
</div>
<script type="text/javascript">
var socket = io.connect();
socket.on("server_to_client", function(data){appendMsg(data.value)});
function appendMsg(text) {
$("#chatLogs").append("<div><a href='work/" + text + "'>" + text + "</a></div>");
}
$("form").submit(function(e){
var message = $("#msgForm").val();
$("#msgForm").val('');
socket.emit("client_to_server", {value : message});
e.preventDefault();
});
</script>
<script type="text/javascript">
$(function() {
$('#ifName').change(function() {
var base64txt = this.files[0];
var reader = new FileReader();
reader.onloadend = function(){
var src = reader.result;
socket.emit("client_to_server", {value : src});
}
reader.readAsDataURL(base64txt);
})
})
</script>
</body>
</html>