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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

1412閲覧

ReactからSocket.IOサーバー(Node)に接続できない

FUGAMARU-MCPE

総合スコア33

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/07/26 17:46

編集2021/07/27 02:14

ReactでWebSocketを使用したいと思い、Socket.IOサーバーを建てて接続を試みましたがどうやっても接続できません。

まずはじめに、socket.io-clientモジュールを用いて、

https://qiita.com/Hakkokunihonbashi/items/9da86d65b79d9743dc47

https://qiita.com/yonetty/items/acc46afa59da1796a767

これらの記事を参考にしながら、サーバー接続時にサーバーから「Welcome」とemitされるものを受け取ってconsole.logで表示するコードを組みました。

JSX

1import React, { useEffect } from "react"; 2import socketIOClient from "socket.io-client"; 3const ENDPOINT = "http://localhost:8080"; 4 5const WS = () => { 6 7 useEffect(() => { 8 const socket = socketIOClient(ENDPOINT); 9 socket.on("Welcome", msg => { 10 console.log(msg) 11 }); 12 }, []); 13 14 return <p>Socket.IO TEST</p> ; 15} 16 17export default WS;

サーバー側はこんな感じです。

JavaScript

1var express = require('express'); 2var socket = require('socket.io'); 3var app = express(); 4server = app.listen(8080); 5 6io = socket(server); 7 8io.on("connection", function(socket){ 9 console.log("新規接続"); 10 socket.emit("Welcome", "Message"); 11});

しかし、全くReact側がサーバーのemitを拾ってくれませんでした。
モジュールの使い方が悪いのかと思い、次にindex.htmlにscriptタグを入れて、典型的な方法でSocket.IOのクライアント側の記述をしてみました。

JavaScript

1function WSConnection(){ 2 socket = io.connect("http://localhost:8080"); 3 console.log("発火"); 4 socket.on("Welcome", function(msg){ 5 console.log(msg); 6 }); 7}

React側でWSConnectionを発火させると、「発火」の文字がコンソールに飛んでくるので処理は行われているはずです。
しかし結果は先程と同じで、サーバー側のコンソールに「新規接続」の文字が何回も出てくる挙動まで一致していました。
そもそもサーバー側がおかしいのかと思われそうですが、Chromeの拡張機能で「Socket.io Checker」なるものがあったので試してみたのですが、そちらだとうまくWebSocket(Socket.IO)接続を行うことができたのでサーバー側の問題ではないと思います。

デベロッパーツールには特にエラーメッセージなどは来ていません。
ただ1つ引っかかるのは、sockjs-nodeというプロセス?がReactと同じポート番号のWebSocket(Socket.IOではない)サーバーに接続している点です。(デベロッパーツールで確認)
もしかしたらそれがSocket.IO接続を妨げているのかもしれない、かはわかりませんが一応書いておいたまでです。

どなたかご教授いただけると幸いです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

FUGAMARU-MCPE

2021/07/26 18:01

ビルドして確認してみましたが、sockjs-nodeのWebSocket接続が消えていました。がしかしそれ以外の状況には変化ありませんでした。
maisumakun

2021/07/26 22:57

> サーバー接続時にサーバーから「Welcome」とemitされるものを受け取ってconsole.logで表示するコードを組みました。 クライアント側のコードはどのようなものでしょうか?
FUGAMARU-MCPE

2021/07/27 02:14

ソースコードを追加致しました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問