nodejs chat - yoshiweb/labs GitHub Wiki

socket.ioでシンプルチャット

socket.ioのインストール

$ 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');
  });

});

HTML

<!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>

chat.js

(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);
	});
})();
⚠️ **GitHub.com Fallback** ⚠️