Socket.io のチュートリアルをjQueryを使わず進める方法

HTML,JavaScript,jQueryの初心者です。

Socket.ioの勉強をしたく、まずはチュートリアルを読んでいます。

ここで、イベントの発行にjQueryを使用したコードが出てきます。

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  $(function () {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault(); // prevents page reloading
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
  });
</script>

このコードをjQuery使わない方法で書き直したく、以下の様な index.js を作成したのですが、どうしてもリロードが走ってしまいます。

<!doctype html>
<html>
<script src="/socket.io/socket.io.js"></script>
<script>
    // client side
    const socket = io();

   const frm =  document.getElementsByName('chatForm');
    frm[0].addEventListener('submit',() => {
        socket.emit('chat message',frm.msg.value);
    },false);
</script>
<head>
    <title>Socket.IO chat</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font: 13px Helvetica, Arial;
        }

        form {
            background: #000;
            padding: 3px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        form input {
            border: 0;
            padding: 10px;
            width: 90%;
            margin-right: .5%;
        }

        form button {
            width: 9%;
            background: rgb(130, 224, 255);
            border: none;
            padding: 10px;
        }

        #messages {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #messages li {
            padding: 5px 10px;
        }

        #messages li:nth-child(odd) {
            background: #eee;
        }
    </style>
</head>
<body>
<ul id="messages"></ul>
<form name="chatForm" action="">
    <input name="msg" id="m" autocomplete="off"/>
    <button id="send">Send</button>
</form>
</body>
</html>

どの様に書けばリロードせずに(=ソケットを維持したまま）socketのemitが出来るのでしょうか。

すいませんが、コード例などが載ってると非常に助かります。

H40831

2020/01/08 10:05

jQueryを使わない方法、見つかりませんでしたか？自分はこの間、素のJavaScriptで実装したばかりなので、普通にあると思うのですが… ただいま外出してるのでURLとかは探せないです。すみません。

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

回答2件

ベストアンサー

ご質問の参照先と全く同じワード「socket.io チャット」で検索し、
検索結果の１ページ目の5番目の記事になります。

チャットアプリ開発に見る、Socket.IOの基本ライブラリの使い方 (1/3)

古くからあるIT系ウェブメディアのドメインで選びました。

追記）

未知の実装を学ぶときには、イベントハンドラの引数(event) を確認するようにします。
イベント伝搬の情報源ですし、preventDefault()のような制御メソッドもあります。

javascript
1frm[0].addEventListener('submit',(event) => {
2  console.log( event ); // 道の実装を学ぶときは必ず確認（習得の近道）。
3
4  event.preventDefault(); // リロード中断
5
6  /* omitted */
7},false);

投稿2020/01/09 12:41

編集2020/01/09 13:12

AkitoshiManabe

総合スコア5432

正直socket.ioは触ったことがないので良くわからないのですが、一般的なJSの知識として、
getElementsByNameは文書内で指定したnameを持つ要素を全て返すものなので、frm.addEventListener～の部分はfrm[0].addEventListener～ではないでしょうか？
それと質問者さんのコードでは元のコードにあるpreventDefaultが無いように思えます。
preventDefaultを指定すればとりあえずフォームのsubmitイベントはキャンセルされるはずです。

まずその2つを修正してみては？

参考：
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByName
https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault

投稿2020/01/08 09:03

編集2020/01/08 09:35