nodeとsocketでチャットシステムを作りたい。

###前提・実現したいこと


1  フォームにテキスト入力してボタンを押すと
   スクリプトのsocket.onが起動して
  emitでサーバーに文字を飛ばします。

2  サーバーに入ってきた文字はonで受け取って
  emitで再びスクリプトのonに送られ
  HTMLでブラウザに文字を出力します。

  これが当初の計画でした。

###発生している問題・エラーメッセージ


フォームを押しても反応しません。
id と onclick を駆使して
関数に発火させようとするんですが
できません。

###該当のソースコード
HTML



<!doctype html>
<script src="/socket.io/socket.io.js"></script>
<script src="/javascript/chat.js"></script>
<script src="http://localhost:1234/socket.io/socket.io.js"></script>

<html lang="ja">
<head>
<meta charset="utf-8">
<title>チャットする</title>
</head>



<body>
<!-- 送るボタンだよ -->
<form>
<input type="text" id=data style="wibth:200px;" />
<!--IDがmsg_inputで、msg send() -->
<button onclick="msg_send()">語る</button>
</form>


<script type="text/javascript">
//サーバーに接続

function msg_send(){

var Socket = io.connect("http://localhost:1234");

socket.on('connect', function(){

socket.emit('msg', 'data');

socket.on('msg push', function(msg){

log(msg);

});

});

};




</script>
</body>

</html>


var http = require('http');
//サーバーモジュールを追加
var fs = require('fs');
//htmlを読み込むモジュールを追加
var socketio = require('socket.io')
//socket.ioモジュール読み込み

var server = http.createServer();
server.on('request', doRequest);
server.listen(1234);
console.log('サーバーの立ち上げに成功したよ!');

fs.readFile('./chat.html', 'utf-8', function(err, data) {
        if (err) {
            res.writeHead(404, {'Content-Type': 'text/plain'});
            res.write('ページが見つかりません!');
            return res.end();
        }
  });

  // サーバーをソケットに紐付ける
  var io = socketio.listen( server );
  console.log('サーバーとsocketの紐付けに成功したよ！')



  // リクエストの処理
  function doRequest(req, res) {
      fs.readFile('./chat.html', 'UTF-8',function(err, data) {
              res.writeHead(200, {'Content-Type': 'text/html'});
              res.write(data);
              res.end();
              console.log('htmlファイルの読み込みに成功したよ！')
   });
  }; //ここポイントになるかもしれませんねえ




  // 接続確立後の通信処理部分を定義
  io.sockets.on( 'connection', function( socket ) {


  // 自分を含む全員宛に送る
 socket.on( 'msg', function( data ) {
 // サーバーからクライアントへ メッセージを送り返し
 sockets.emit( 'msg push', data);
      });

  });

行動規範の内容に同意します

回答4件

Node.jsの方の問題は1箇所程度です。

404関連の部分は全然動作していません。

エラーかどうかを判定して404レスポンスを返すなら以下のコードを参照してください。

var http = require('http');
//サーバーモジュールを追加
var fs = require('fs');
//htmlを読み込むモジュールを追加
var socketio = require('socket.io')
//socket.ioモジュール読み込み

var server = http.createServer();
server.on('request', doRequest);
server.listen(1234);
console.log('サーバーの立ち上げに成功したよ!');

// サーバーをソケットに紐付ける
var io = socketio.listen( server );
console.log('サーバーとsocketの紐付けに成功したよ！')

// リクエストの処理
function doRequest(req, res) {
  fs.readFile('./chat.html', 'UTF-8',function(err, data) {
    if (err) {
      res.writeHead(404, {'Content-Type': 'text/plain'});
      res.write('ページが見つかりません!');
      res.end();
    }
    else {
      res.writeHead(200, {'Content-Type': 'text/html'});
      res.write(data);
      res.end();
      console.log('htmlファイルの読み込みに成功したよ！')
    }
  });
}; //ここポイントになるかもしれませんねえ

// 接続確立後の通信処理部分を定義
io.sockets.on( 'connection', function( socket ) {
  // 自分を含む全員宛に送る
  socket.on( 'msg', function( data ) {
    // サーバーからクライアントへ メッセージを送り返し
    sockets.emit( 'msg push', data);
  });
});

あと細かい話ですが、インデントくらいは整理しておくと
回答者の方も読みやすくなるので、回答が得られるかもしれません。

投稿2016/06/03 14:29

masaya_ohashi

総合スコア9206

問題が数か所あります。

#HTML

scriptの読み込みはheadタグ内で行う
window.onloadの中で処理すべき

これはDOMの解決が終わったことが保証されないタイミングで操作すべきではないからです。

socketの生成は1回のみ行うべき

socket.ioはコネクションを一度生成したら接続が維持されます。
現在のコードではボタンを押した瞬間のみコネクションが維持され、すぐ終了してしまいます。

socket.onの登録は1回のみ行うべき

同じくonの処理も一度生成したタイミングで一度だけ行うべきです。

ボタンを押したときの処理はemitだけでよいです
現状送信されるデータは'data'という文字列であり、テキストフォーム内のデータではない
socket.io.js が二回読み込まれている

おそらく同じものを読み込んでいます。どちらか一方のみで大丈夫だと思います。

以上のことからHTMLのコードはこのような形にしたらよいと思います。

<!doctype html>

<html lang="ja">
<head>
<meta charset="utf-8">
<title>チャットする</title>
<script src="/socket.io/socket.io.js"></script>
<script src="/javascript/chat.js"></script>
<script type="text/javascript">
var socket = null;
window.onload = function() {
    //初期化処理
	//サーバーに接続
    socket = io.connect("http://localhost:1234");
    //socketにリスナー登録
	socket.on('connect', function(){
	    //msg pushイベントを受け取ったときログに出力
		socket.on('msg push', function(msg){
			log(msg);
		});
	});
};

//語るボタンを押したときの処理
function msg_send(){
    //テキストフォームのデータを取得
	var data = document.getElementById("data").value;
	socket.emit('msg', data);
}
</script>
</head>

<body>
<!-- 送るボタンだよ -->
<form>
<input type="text" id=data style="wibth:200px;" />
<!--IDがmsg_inputで、msg send() -->
<button onclick="msg_send()">語る</button>
</form>
</body>
</html>

長過ぎるのでNode.js側のコードはもうひとつの回答に書きます

投稿2016/06/03 14:14

masaya_ohashi

総合スコア9206

nodejs チャット
で google 検索すると、情報が得られると思います。
それらの例で練習をしてから、ご自分のコードをみなおすと良いと思います。

検索結果例：

node.jsとsocket.ioで簡易チャットを作成する http://blog.webcreativepark.net/2015/12/09-210844.html
リアルタイムチャット作成(Node.js) http://log-log.hateblo.jp/entry/2016/05/01/185131

投稿2016/06/03 13:26

katoy

総合スコア22324

一つ間違いがあります。

HTML側スクリプトの msg_send() の冒頭部分で、var Socket = io.connect("http://localhost:1234"); と S を大文字にしていますが、スクリプトのその他の部分では、 socket とすべて小文字で書かれています。JavaScriptは case sensitive な言語ですので、大文字小文字はきちんと整合性を保つ必要があります。

コードのほかの部分には、目立つ間違いは無いように思えます（動作確認していないので断言できませんが）

ちなみに、これらのコードは socket.io の公式サイトのサンプルを参考にして、少し改造したものと思われますが、違いますか？公式のほうでは Node.js + Express を前提に書かれているという違いがありますが、ほぼ同じ内容のプログラムになっていますので、一度ダウンロードして動作確認とコードレビューをされることをお勧めします。

socket.io公式サイトのチャットアプリサンプル
 チャットアプリのコード一式 (github)

投稿2016/06/01 13:33