質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1198閲覧

NodeJS socket.io で io.sockets.on の外から socket.broadcast.to(room).emit を使う

Y.NINOMIYA

総合スコア32

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/04/09 15:58

お世話になります。

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問