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

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

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

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

Socket.IO

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

JavaScript

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

Q&A

解決済

1回答

1955閲覧

【Socket.io】クライアントから送信したメッセージがサーバ側に複数受信される

asakura

総合スコア29

Node.js

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

Socket.IO

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

JavaScript

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

0グッド

0クリップ

投稿2017/09/04 12:12

編集2017/09/04 14:26

Socket.ioによるチャットアプリを作成しています。
クライアントからメッセージを送信した所、サーバ側に複数受信されてしまいます。
また、ブラウザをリロードするとリロードした分、サーバ側が受信するメッセージ数が増えてしまいます。

どのように制御したら良いかわからず、お教え頂けないでしょうか。

js

1// Chatサーバ 2// S01.必要なモジュールを読み込む 3var socketio = require('socket.io'); 4var io; 5 6// S02.server.jsを読み込み 7exports.listen = function(server) { 8 // S03.WebSocketの有効化 9 io = socketio.listen(server); 10 io.sockets.on('connection', function(Socket) { 11 console.log("WebSocket接続"); 12 13 // S04.Connectionイベントを受信する 14 io.sockets.on('connection', function(socket) { 15 var room = ''; 16 var name = ''; 17 18 // roomへの入室は「Socket.join(room名)」 19 socket.on('client_to_server_join', function(selectRoom) { 20 console.log("クライアントから受信したルーム名:", selectRoom); 21 room = selectRoom; 22 socket.join(room); 23 }); 24 25 // S05.client_to_serverイベントのデータを受信する 26 socket.on('client_to_server', function(name, message) { 27 console.log("クライアントから受信データの中身(部屋):", name, message); 28 // S06.server_to_clientイベント・データを送信する 29 socket.broadcast.to(room).emit('server_to_client', name, message); 30 }); 31 // S07.client_to_server_broadcastイベント・データを受信し、送信元以外に送信する 32 socket.on('client_to_server_broadcast', function(entryMessage) { 33 console.log("クライアントから全体送信:", entryMessage); 34 socket.broadcast.to(room).emit('server_to_client', entryMessage); 35 }); 36 // S08.client_to_server_personalイベント・データを受信し、送信元のみに送信する 37 socket.on('client_to_server_personal', function(data) { 38 console.log("クライアントから受信データの中身(個人)", data); 39 var id = socket.id; 40 name = data; 41 var joinMessage = name + "さんが入室しました。" 42 io.to(id).emit('server_to_client', { value: joinMessage }); 43 }); 44 // S09.dicconnectイベントを受信し、退出メッセージを送信する 45 socket.on('disconnect', function() { 46 if (name == '') { 47 console.log("未入室のまま、退出しました。"); 48 } else { 49 var endMessage = name + "さんが退出しました。" 50 io.to(room).emit('server_to_client', { value: endMessage }); 51 } 52 }) 53 }); 54 }); 55};

js

1// Chatクライアント 2// C02.ソケットへ接続 3var socket = io.connect('http://localhost:3000'); 4var isEnter = false; 5var name = ''; 6 7// チャットメッセージの書き込み 8function clientChatMessage(name, message) { 9 var name_value = $("#name").val(); 10 if (name == name_value) { 11 var messageElement = $("<il><p class='sender_name me'>" + name + "</p><p class='right_balloon'>" + message + "</p><p class='clear_balloon'></p></il>"); 12 13 // クライアントからメッセージの送信 14 console.log("サーバへ送信する内容 名前:", name + " メッセージ:" + message); 15 socket.emit('client_to_server', name, message); 16 17 } else { 18 var messageElement = $("<il><p class='sender_name'>" + name + "</p><p class='left_balloon'>" + message + "</p><p class='clear_balloon'></p></il>"); 19 } 20 21 // チャットボードに書き込み 22 $('#messages').append(messageElement); 23 $('#messages').scrollTop($('#messages').prop('scrollHeight')); 24 $('#send-message').val(''); 25} 26 27$(document).ready(function() { 28 // var chatApp = new Chat(socket); 29 var selectRoom = $("#rooms").val(); 30 var name = $("#name").val(); 31 console.log("roomid: " + selectRoom); 32 console.log("name: " + name); 33 34 // roomへ入室する 35 var entryMessage = name + "さんが入室しました。"; 36 socket.emit('client_to_server_join', selectRoom); 37 console.log("ルーム情報を配信: " + selectRoom); 38 39 // client_to_server_broadcastイベント・データを送信する 40 socket.emit('client_to_server_broadcast', entryMessage); 41 console.log("ルーム内に全体送信:", entryMessage); 42 43 // client_to_server_personalイベント・データを送信する 44 socket.emit('client_to_server_personal', name); 45 console.log("ルーム内に送信:", name); 46 47 // C04.server_to_clientイベント・ データを受信する 48 socket.on('server_to_client', function(name, message) { 49 console.log("サーバから受信したデータ:", name, message); 50 clientChatMessage(name, message); 51 }); 52 53 $("#send-message").focus(); 54 // 「送信」ボタンをクリック 55 $('#send-button').click(function() { 56 // フォームに入力したメッセージを取得 57 var message = $('#send-message').val(); 58 clientChatMessage(name, message); 59 }); 60});

html

1<--! 2チャットクライアントhtml 3id="name"のvalueで接続ユーザを切り替えています。 4--> 5 6<!DOCTYPE html> 7<html lang="en"> 8 9<head> 10 <meta charset="UTF-8"> 11 <title>chat</title> 12 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 13 <link rel="stylesheet" type="text/css" href="css/chatStyle.css"> 14 <script src="/socket.io/socket.io.js" type="text/javascript"></script> 15 <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script> 16 <script src="js/chat.js" type="text/javascript"></script> 17 <script src="js/chat_ui_client2.js" type="text/javascript"></script> 18</head> 19 20<body> 21 <div class="panel-default"> 22 <div class="panel-heading"> 23 <p>チャットサンプル クライアント</p> 24 </div> 25 <div id='room'></div> 26 <div id="scroller" class="panel-body"> 27 <ul id='messages'></ul> 28 </div> 29 <form id="send-form"> 30 <div class="form-group"> 31 <label>メッセージ</label> 32 <input class="span11" id="send-message" type="text" placeholder="メッセージ内容を入力してください。"> 33 <button class="btn btn-primary" id="send-button" type="button">送信</button> 34 <select class="form-control" id="rooms"> 35 <option value="room01">部屋01</option> 36 </select> 37 <select class="form-control" id="name"> 38 <option value="山田 太郎">山田 太郎</option> 39 </select> 40 </div> 41 </form> 42 </div> 43</body> 44 45</html> 46コード

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

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

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

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

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

guest

回答1

0

自己解決

Chatサーバ側にソケットを2回記述している事が原因でした。

js

1// S02.server.jsを読み込み 2exports.listen = function(server) { 3 // S03.WebSocketの有効化 4 io = socketio.listen(server); 5 io.sockets.on('connection', function(Socket) { 6 console.log("WebSocket接続"); 7 8 // S04.Connectionイベントを受信する 9 io.sockets.on('connection', function(socket) { 10 var room = ''; 11 var name = ''; 12 13

↓正しくは

js

1// S02.server.jsを読み込み 2exports.listen = function(server) { 3 // S03.WebSocketの有効化 4 io = socketio.listen(server); 5// io.sockets.on('connection', function(Socket) { ←が不要 6 console.log("WebSocket接続"); 7 8 // S04.Connectionイベントを受信する 9 io.sockets.on('connection', function(socket) { 10 var room = ''; 11 var name = ''; 12

投稿2017/09/05 10:41

asakura

総合スコア29

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問