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

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

ただいまの
回答率

89.09%

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

受付中

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 1,976

7ppm

score 12

前提・実現したいこと

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>

JS

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);
      });

  });
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

0

一つ間違いがあります。

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

検索結果例:

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

問題が数か所あります。

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側のコードはもうひとつの回答に書きます

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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);
  });
});

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.09%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる