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接続を妨げているのかもしれない、かはわかりませんが一応書いておいたまでです。
どなたかご教授いただけると幸いです。
あなたの回答
tips
プレビュー