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

Question

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

受付中

回答 4

投稿 2016/06/01 10:31

評価
クリップ 0
VIEW 2,220

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 件

評価が高い順
新着順
古い順

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

score 0 · Answer 1 · 2016-06-01T22:33

一つ間違いがあります。

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

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

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

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

score 0 · Answer 2 · 2016-06-03T22:26

0

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 22:26

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

score 0 · Answer 3 · 2016-06-03T23:14

問題が数か所あります。

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

score 0 · Answer 4 · 2016-06-03T23:29

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分調べてもわからないことは、質問しよう！

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

前提・実現したいこと

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

該当のソースコード

HTML

関連した質問

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

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

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

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

前提・実現したいこと

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

該当のソースコード

HTML

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン