$ npm install --save-dev socket.io
app.js を socket.io(websocket)で通信できるように編集
var app = require('http').createServer(handler);
app.listen(3000);
function handler (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('');
}
var io = require('socket.io').listen(app);
io.sockets.on('connection', function(socket) {
console.log('connect');
// 受信
socket.on('msg send', function(msg) {
console.log('msg send', msg);
// 配信
socket.emit('msg push', msg);
socket.broadcast.emit('msg push', msg);
});
// 接続解除
socket.on('disconnect', function() {
console.log('disconnect');
});
});
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<input type="text" name="message" id="message">
<button id="btn">送信</button>
<dl id="list"></dl>
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/chat.js"></script>
</body>
</html>
(function() {
var socket = io.connect('http://localhost:3000');
socket.on('connect', function() {
console.log('connected');
});
$('#btn').click(function() {
var message = $('#message');
console.log("送信", message.val());
//サーバーにメッセージを引数にイベントを実行する
socket.emit('msg send', message.val());
});
//サーバーが受け取ったメッセージを返して実行する
socket.on('msg push', function (msg) {
console.log(msg);
var date = new Date();
$('#list').prepend($('<dt>' + date + '</dt><dd>' + msg + '</dd>'));
});
socket.on('msg updateDB', function(msg){
console.log(msg);
});
})();