お世話になります。
Nodeを使ってWebSocketを使用するWebアプリケーションを作成しています。
コードを見るとわかるのですが、io.sockets.on
の関数の中でないとルームへのメッセージ配信ができないようです。
私はGETリクエストを受けて特定のルームへWebSocketを送信したいコードにしたいのですが、どうもやり方がわかりません。
Node自体が初めて扱うので以下の記事を参考にしました。(コードはほぼそのままです)
Socket.IO開発時に役立つツール4選とroom、namespaceライブラリの使い方
/test
にアクセスするとroom1に「GETから」とメッセージを送るようにしたいです(send_socket関数のところ)。
ただ、socket.to...
のsocket
が未定義のためエラーになってしまいます。
io.sockets.on
の外で特定ルームにメッセージを送信するにはどうしたらよいのでしょうか。
回答よろしくお願いいたします。
ソースコード(エラーあり)
JavaScript
1// app.js(NodeJS) 2 3// S01. 必要なモジュールを読み込む 4var http = require('http'); 5var socketio = require('socket.io')(http); 6var fs = require('fs'); 7// S02. HTTPサーバを生成する 8var url = require('url'); 9var server = http.createServer(function(req, res) { 10 var url_parse = url.parse(req.url, true); 11 if (url_parse.path == "/chat"){ 12 res.writeHead(200, {'Content-Type' : 'text/html'}); 13 res.end(fs.readFileSync('index.html', 'utf-8')); 14 } 15 if (url_parse.path == "/test"){ 16 res.writeHead(200, {'Content-Type' : 'text/html'}); 17 res.write("Hello World!"); 18 res.end(); 19 send_socket() 20 } 21}).listen(8001); // ポート競合の場合は値を変更 22 23// S03. HTTPサーバにソケットをひも付ける(WebSocket有効化) 24var io = socketio.listen(server); 25 26// S04. connectionイベントを受信する 27io.sockets.on('connection', function(socket) { 28 var room = ''; 29 var name = ''; 30 31 // roomへの入室は、「socket.join(room名)」 32 socket.on('client_to_server_join', function(data) { 33 console.log(socket); 34 room = data.value; 35 socket.join(room); 36 }); 37 // S05. client_to_serverイベント・データを受信する 38 socket.on('client_to_server', function(data) { 39 // S06. server_to_clientイベント・データを送信する 40 io.to(room).emit('server_to_client', {value : data.value}); 41 }); 42 // S07. client_to_server_broadcastイベント・データを受信し、送信元以外に送信する 43 socket.on('client_to_server_broadcast', function(data) { 44 socket.broadcast.to(room).emit('server_to_client', {value : data.value}); 45 }); 46 // S08. client_to_server_personalイベント・データを受信し、送信元のみに送信する 47 socket.on('client_to_server_personal', function(data) { 48 var id = socket.id; 49 name = data.value; 50 var personalMessage = "あなたは、" + name + "さんとして入室しました。" 51 io.to(id).emit('server_to_client', {value : personalMessage}); 52 }); 53 // S09. dicconnectイベントを受信し、退出メッセージを送信する 54 socket.on('disconnect', function() { 55 if (name == '') { 56 console.log("未入室のまま、どこかへ去っていきました。"); 57 } else { 58 var endMessage = name + "さんが退出しました。" 59 io.to(room).emit('server_to_client', {value : endMessage}); 60 } 61 }); 62}); 63 64function send_socket(){ 65 socket.to("room01").emit('server_to_client', {value : "GETから"}); 66}
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>websocket-chat</title> 6 <link rel="stylesheet" 7 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 9 <!-- C01. Socket.IOクライアントライブラリの読込み --> 10 <script type="text/javascript" src="/socket.io/socket.io.js"></script> 11</head> 12<body> 13 <div class="container"> 14 <h1>WebSocket-Chat</h1> 15 <form class="form-inline"> 16 <div class="form-group"> 17 <label class="roomLabel" for="rooms">部屋:</label> 18 <select class="form-control" id="rooms"> 19 <option value="room01">部屋01</option> 20 <option value="room02">部屋02</option> 21 </select> 22 <label class="nameLabel" for="msgForm">名前:</label> 23 <input type="text" class="form-control" id="msgForm"> 24 </div> 25 <button type="submit" class="btn btn-primary" id="sendButton">入室</button> 26 </form> 27 <div id="chatLogs"></div> 28 </div> 29 30 <script type="text/javascript"> 31 var socket = io.connect(); // C02. ソケットへの接続 32 var isEnter = false; 33 var name = ''; 34 35 // C04. server_to_clientイベント・データを受信する 36 socket.on("server_to_client", function(data){appendMsg(data.value)}); 37 function appendMsg(text) { 38 $("#chatLogs").append("<div>" + text + "</div>"); 39 } 40 41 $("form").submit(function(e) { 42 var message = $("#msgForm").val(); 43 var selectRoom = $("#rooms").val(); 44 $("#msgForm").val(''); 45 if (isEnter) { 46 message = "[" + name + "]: " + message; 47 // C03. client_to_serverイベント・データを送信する 48 socket.emit("client_to_server", {value : message}); 49 } else { 50 name = message; 51 var entryMessage = name + "さんが入室しました。"; 52 socket.emit("client_to_server_join", {value : selectRoom}); 53 // C05. client_to_server_broadcastイベント・データを送信する 54 socket.emit("client_to_server_broadcast", {value : entryMessage}); 55 // C06. client_to_server_personalイベント・データを送信する 56 socket.emit("client_to_server_personal", {value : name}); 57 changeLabel(); 58 } 59 e.preventDefault(); 60 }); 61 62 function changeLabel() { 63 $(".nameLabel").text("メッセージ:"); 64 $("#rooms").prop("disabled", true); 65 $("button").text("送信"); 66 isEnter = true; 67 } 68 69 </script> 70</body> 71</html>
あなたの回答
tips
プレビュー