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

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

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

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

WebSocket

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

解決済

Websockeによるチャットアプリにルーム機能を付けたい

asakura
asakura

総合スコア0

Node.js

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

WebSocket

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

1回答

0評価

0クリップ

3288閲覧

投稿2017/08/30 14:37

Websocketを使ったチャットアプリを作ってます。
クライアントから任意の文字列をサーバ側に渡し、チャットルームを生成したいのですが、
任意の文字列はサーバ側に送っていてチャットルームが生成されているものの、
サーバから入力したメッセージは、接続しているすべてのクライアントに送信されてしまい、
意図している挙動になりません。

どのように対処すれば解決するか、教えて頂けないでしょうか。
よろしくお願い致します。

実際のチャットアプリのコードを以下に添付します。

js

// chatサーバ var socketio = require\('socket\.io'\); var io; exports\.listen = function\(server\) { io = socketio\.listen\(server\); io\.sockets\.on\('connection', function\(clientSocket\) { console\.log\("WebSocket接続"\); // クライアントから送られて来たルーム値でルームを開設 var room = ""; clientSocket\.on\("from_client", function\(data\) { room = data\.value; console\.log\("クライアントから送信されたroom: %s", room\); joinRoom\(clientSocket, room\); }\); // チャットメッセージを書き込むと処理する handleMessageBroadcasting\(clientSocket\); // クライアントから送られてきたメッセージ受け取り clientSocket\.on\("from_client", function\(name, message\) { console\.log\("クライアントから送信されたname: %s", name\); console\.log\("クライアントから送信されたmessage: %s", message\); io\.sockets\.emit\('receiveMessage', { name: name, message: message }\); }\); }\); }; function joinRoom\(clientSocket, room\) { // ユーザーをルームに参加させる clientSocket\.join\(room\); // ユーザに新しいルームに入ったことを知らせる clientSocket\.emit\('joinResult', { room: room }\); } function handleMessageBroadcasting\(clientSocket\) { clientSocket\.on\('newChatMessage', function\(name, message\) { console\.log\("サーバから送信されたname: %s", name\); console\.log\("サーバから送信されたmessage: %s", message\); // チャットに書き込んだメッセージをクライアントに通知 io\.emit\('from_server', { name: name, message: message }\) }\); }

js

// chatサーバのUI生成 // チャットメッセージの書き込み function updateChatMessage\(chatApp, name, message\) { if \(name == "山田 太郎"\) { var messageElement = \$\("<il><p class='sender_name me'>" \+ name \+ "</p><p class='right_balloon'>" \+ message \+ "</p><p class='clear_balloon'></p></il>"\); // クライアントに通知 chatApp\.sendMessage\(name, message\); } else { var messageElement = \$\("<il><p class='sender_name'>" \+ name \+ "</p><p class='left_balloon'>" \+ message \+ "</p><p class='clear_balloon'></p></il>"\); } // チャットボードに書き込み \$\('#messages'\)\.append\(messageElement\); \$\('#messages'\)\.scrollTop\(\$\('#messages'\)\.prop\('scrollHeight'\)\); \$\('#send-message'\)\.val\(''\); } var socket = io\.connect\('http://localhost:3000'\); \$\(document\)\.ready\(function\(\) { var chatApp = new Chat\(socket\); // ルームに参加 socket\.on\('joinResult', function\(result\) { console\.log\("ルームへ入室", result\.room\) \$\("#room"\)\.text\("接続しているルーム: " \+ result\.room\); }\); // クライアントから来たメッセージの受信 socket\.on\('receiveMessage', function\(data\) { updateChatMessage\(chatApp, data\.name, data\.message\); }\); \$\("#send-message"\)\.focus\(\); // 「送信」ボタンをクリック \$\('#send-button'\)\.click\(function\(\) { // フォームに入力したメッセージを取得 var message = \$\('#send-message'\)\.val\(\); updateChatMessage\(chatApp, "山田 太郎", message\); }\); }\);

js

// chatクラス生成 var Chat = function\(socket\) { this\.socket = socket; }; // クライアントに書き込んだメッセージ内容を返す Chat\.prototype\.sendMessage = function\(name, message\) { this\.socket\.emit\('newChatMessage', name, message\); }

js

// ChatクライアントUI生成 // チャットメッセージの書き込み function clientChatMessage\(chatApp, name, message\) { if \(name == "山田 次郎"\) { var messageElement = \$\("<il><p class='sender_name me'>" \+ name \+ "</p><p class='right_balloon'>" \+ message \+ "</p><p class='clear_balloon'></p></il>"\); // クライアントからメッセージの送信 socket\.emit\('from_client', name, message\); } else { var messageElement = \$\("<il><p class='sender_name'>" \+ name \+ "</p><p class='left_balloon'>" \+ message \+ "</p><p class='clear_balloon'></p></il>"\); } // チャットボードに書き込み \$\('#messages'\)\.append\(messageElement\); \$\('#messages'\)\.scrollTop\(\$\('#messages'\)\.prop\('scrollHeight'\)\); \$\('#send-message'\)\.val\(''\); } var socket = io\.connect\('http://localhost:3000'\); \$\(document\)\.ready\(function\(\) { var chatApp = new Chat\(socket\); // ルーム情報を送信 var selectRoom = 'testroom'; socket\.emit\('from_client', { value: selectRoom }\); console\.log\("ルーム情報を配信: " \+ selectRoom\); // ルームに参加 socket\.on\('joinResult', function\(result\) { console\.log\("ルームへ入室", result\.room\) \$\("#room"\)\.text\("接続しているルーム: " \+ result\.room\); }\); // サーバから来たメッセージの受信 socket\.on\('from_server', function\(data\) { clientChatMessage\(chatApp, data\.name, data\.message\); }\); \$\("#send-message"\)\.focus\(\); // 「送信」ボタンをクリック \$\('#send-button'\)\.click\(function\(\) { // フォームに入力したメッセージを取得 var message = \$\('#send-message'\)\.val\(\); clientChatMessage\(chatApp, "山田 次郎", message\); }\); }\);

html

// Chatクライアント <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>chat</title> <link rel="stylesheet" href="https://maxcdn\.bootstrapcdn\.com/bootstrap/3\.3\.2/css/bootstrap\.min\.css"> <link rel="stylesheet" type="text/css" href="css/chatStyle\.css"> <script src="/socket\.io/socket\.io\.js" type="text/javascript"></script> <script src="http://code\.jquery\.com/jquery-1\.8\.0\.min\.js" type="text/javascript"></script> <script src="js/chat\.js" type="text/javascript"></script> <script src="js/chat_ui_client\.js" type="text/javascript"></script> </head> <body> <div class="panel-default"> <div class="panel-heading"> <p>チャットサンプル クライアント</p> </div> <div id='room'></div> <div id="scroller" class="panel-body"> <ul id='messages'></ul> </div> <form id="send-form"> <div class="form-group"> <label>メッセージ</label> <input class="span11" id="send-message" type="text" placeholder="メッセージ内容を入力してください。"> <button class="btn btn-primary" id="send-button" type="button">送信</button> </div> </form> </div> </body> </html>

html

// chatサーバ画面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>chat</title> <link rel="stylesheet" href="https://maxcdn\.bootstrapcdn\.com/bootstrap/3\.3\.2/css/bootstrap\.min\.css"> <link rel="stylesheet" type="text/css" href="css/chatStyle\.css"> <script src="/socket\.io/socket\.io\.js" type="text/javascript"></script> <script src="http://code\.jquery\.com/jquery-1\.8\.0\.min\.js" type="text/javascript"></script> <script src="js/chat\.js" type="text/javascript"></script> <script src="js/chat_ui\.js" type="text/javascript"></script> </head> <body> <div class="panel-default"> <div class="panel-heading"> <p>チャットサンプル</p> </div> <div id='room'></div> <div id="scroller" class="panel-body"> <ul id='messages'></ul> </div> <form id="send-form"> <div class="form-group"> <label>メッセージ</label> <input class="span11" id="send-message" type="text" placeholder="メッセージ内容を入力してください。"> <button class="btn btn-primary" id="send-button" type="button">送信</button> </div> </form> </div> </body> </html>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Node.js

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

WebSocket

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