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

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

ただいまの
回答率

88.91%

socket.io で値をemitできない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 227

moritat-222

score 11

前提、実現したいこと

myFormのnameとmsgに入力した値を取得し、
チャットスペースに「ユーザーネーム」と「本文」として表示したいと考えています。

クライアントサイドのjavascriptから、nameとmsgの値を取得して、サーバーサイドにemit_from_clientイベントとして送信。

サーバーサイドでは、emit_from_clientイベントで取得したnameをusers配列に保存。nameとmsgの値をemit_from_serverイベントでクライアントサイドに投げ返す。

クライアントサイドで、emit_from_serverイベントから取得したnameとmsgを、DOM操作でHTMLに表示する

というのが、現在考えている実装の流れです。

現在のコード

・ファイル構成

├── app.js  //サーバーサイドjavascript
├── index.html 
├── index.js //クライアントサイドjavascript
├── node_modules
├── package-lock.json
└── users.js //addUser関数

・app.js

var app = require('http').createServer(handler),
    io = require('socket.io').listen(app),
    fs = require('fs');

const {addUser} = require('./users.js')

app.listen(1337, () => {
  console.log('server is up on port 1337')
});

function handler(req, res){
  fs.readFile(__dirname + '/index.html', function(err, data){
    if(err){
      res.writeHead(500);
      return res.end('Error');
    }
    res.writeHead(200);
    res.write(data);
    res.end();
  })
}


io.sockets.on('connection', function(socket){

    socket.on('emit_from_client', ({username, msg}) => {
      const user = addUser(socket.id, username)

      console.log(user.username + msg)

      io.sockets.emit('emit_from_server', {
        username: username,
        msg: msg
      })
    });
})

・users.js

const users = []

const addUser = ({id, username}) => {
  if(!id || !username){
    return{
      error: `Username and Rooms are required`
    }
  }

  const user = {id, username}
  users.push(user)
  return {user}
}

module.exports = {
  addUser
}

・index.js

var socket = io();

const $myForm = document.querySelector('#myForm')

socket.on('connection', (socket) => {
  console.log('new websocket connection')

  $myForm.submit(function(e){
    e.preventDefault();

    socket.emit('emit_from_client', {
      username: document.querySelector('#name').value,
      msg: document.querySelector('#msg').value
      })
    console.log({username, msg}) //HTMLに入力されたname,msgがemitされているならここでターミナルに表示されるはず
  })

    socket.on('emit_from_server', (data) => {
      const $logs = document.querySelector('#logs')
      const username = data.username
      const msg = data.msg

      console.log(username, msg)

      $logs.append('<li>').text(`[${username} ]${msg}`)
    })
  })

・index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="index.js"></script>
  <title>Socket.ioの練習</title>
</head>
<body>
  <form id="myForm">
    <input type="text" id="name">
    <input type="text" id="msg">
    <input type="submit" value="送信">
  </form>
  <li id="logs"></li>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>


</body>
</html>

問題点

myFormのsubmitボタンを押しても、フォームに入力された値がli要素として追加されない。

怪しい点

index.jsでconsole.log({username, msg})をした時に、ターミナルに何も表示されないため、そもそもクライアントサイドのjavascriptがフォームに入力した値の取得に失敗しているような気がします。

しかしなぜそうなっているのか、どうすればうまく動かせるのかわからず質問させていただきました。よろしくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

しかしなぜそうなっているのか、どうすればうまく動かせるのかわからず

クライアント側で socket.io を活かしていないためです。
input[type=submit] は、通常のHTTP要求(GET/POST)になります
(socket.io で隠蔽されていますが、WebSocket APIを使う必要があります)。


ご質問のコードでは、サーバー側は socket.io のAPIを利用していますが、クライアント側は socket.io のAPIを利用せず、Form で送信しているのがわかります。

  1. ブラウザ側:input[type=button] のクリックイベントで入力フィールドの値を取得。
  2. ブラウザ側:JSONなど、メッセージ(文字列)化した上で socket.io の emit() を使う。
  3. サーバー側:メッセージ受信イベントで然るべき処理を書く

Google検索:socket.io チャット で検索し、チャット実装例の記事を再確認してみてください
(個人的には、@ITチャットアプリ開発に見る、Socket.IOの基本ライブラリの使い方 で勉強しました)。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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