node.jsでクライアント側のscriptを使用すると、接続がリセットされる。

Question

前提・実現したいこと

node.jsでsocket.ioを使用したアプリを作成しようとしたところ、
HTMLファイルを表示する所まではできたのですが、

<script type="text/javascript" src="使用するjsファイルのパス"> を設定しテストしてみたところで、HTMLが表示された後、 起動していたnode.jsが消え、ブラウザを再読み込みすると、 サーバーがアクセスできない状況になっています。 なぜこの様な動作をしてしまうのか、考えられる原因をいくつか教えて欲しいです。 可能ならばその対処の方法も教えていただけたら幸いです。 ### 発生している問題・エラーメッセージ コンソールを確認したところ下記のように出ました。 ``` SCRIPT12031: SCRIPT12031: WebSocket Error: Network Error 12031, サーバーとの接続がリセットされました。 ``` ### 試したこと 原因を探るべく、上記の使用するjsファイルの中を各処理を１つずつ消して確認してみたところ 下記の行を消すと上記のエラーは発生しません。 ``` const socket = io(); ``` ### 補足情報（FW/ツールのバージョンなど） ``` hostname = '127.0.0.1'; port = 3000 server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); }); ``` でサーバーを立てています。 node.jsは　v12.16.1.　です。

Answer 1

socket.ioを使用したアプリを作成しようとした

厳しい回答となりますが、知識レベルがその域に達しているとは思えません。

なぜこの様な動作をしてしまうのか、考えられる原因をいくつか

1. 通信の仕組みを理解できていない(質問をしているのがその証拠)
2. 適切なサーバーを書けていない

*.html や *.css, *.js は NodeJS 入門ガイドに例示されるように HTTPサーバーを書く形で実装方法を習得するのが基本で、多くの要求/応答に対応するため express などのフレームワークを活用します。

socket.io は「リアルタイムな通信を簡単に実現するため」という謳い文句ですが、実際は Echoサーバーの基礎知識を有し、Web仕様で似たようなことを実現する方法論を理解した人が、「確かに簡単だよね」と納得して使う代物です。

少なくとも、以下の記事内容を理解できないなら、基礎固めが不十分と言えます

• qiita Socket.ioとは何か?リアルタイムWebアプリケーションを実現する技術をまとめてみた
• @ITいまさら聞けないWebSocketとSocket.IOの基礎知識＆インストール (1/2) (ver1時代の記事)

その対処の方法

学習手順を確認し、段階的に知識を身に着けてください。急がば廻れです。

1. まずは、HTTPサーバーを構築するところから始める

1.1. Hello World を試し、リクエスト/レスポンスを理解する
1.2. express / KoaJS を使いこなせるレベルに達する
2. チャットアプリなど、socket.io に適した実装を追加する

Comments

[Ara]

2週間前の質問に答えて頂き有難うございます。
質問していた事を忘れていて、解決方法欄に自己解決を書く事をできていませんでした。
今は1から勉強しています。アドバイスを真摯に受け止め、勉強していきたいと思います。