![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
nodejsでwebsocket †webルートとなるディレクトリを作成 †mkdir socket_io_work cd socket_io_work sockletIOインストール †npm install socket.io サーバ処理 †server.js var fs = require("fs");
var server = require("http").createServer(function(req, res) {
res.writeHead(200, {"Content-Type":"text/html"});
var output = fs.readFileSync("./index.html", "utf-8");
res.end(output);
}).listen(8080);
var io = socketio.listen(server);
io.sockets.on('connection', function(socket) {
socket.on('client_to_server', function(data) {
io.sockets.emit('server_to_client', {value : data.value});
});
});
クライアント処理 †index.html <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>websocket-chat</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script> <!-- 実際にはこんなファイルはないが socket.io が動的に生成する -->
</head>
<body>
<div class="container">
<h1>WebSocket-Chat</h1>
<form id="form1" class="form-inline">
<div class="form-group">
<label for="msgForm">メッセージ：</label>
<input type="text" class="form-control" id="msgForm">
</div>
<button type="submit" class="btn btn-primary">送信</button>
</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>" + text + "</div>");
}
$("form").submit(function(e){
var message = $("#msgForm").val();
$("#msgForm").val('');
socket.emit("client_to_server", {value : message});
e.preventDefault();
});
</script>
</body>
</html>
起動 †node server.js |
