前提
SpringBootのサンプルを見ながら、
フロント側のWebSocket機能のサンプルをReactで書き換えてみています。
実現したいこと
stomp.jsのライブラリに関数を渡した時、関数内部で使用している値が固定される事象の解決をしたいです。
該当のソースコード
tsx
1const WebSocketSample = () => { 2 const [stompClient, setStompClient] = useState<Stomp.Client>(); 3 const [greetings, setGreetings] = useState<string[]>([]); 4 const [name, setName] = useState<string>(''); 5 const [connected, setConnected] = useState<boolean>(false); 6 7 const connect = () => { 8 const socket = new SockJS('/gs-guide-websocket'); 9 const client = Stomp.over(socket); 10 client.connect({}, (frame: any) => { 11 console.log(frame); 12 client.subscribe('/topic/greetings', (greeting) => { 13 showGreeting(JSON.parse(greeting.body).content); 14 }); 15 }); 16 setStompClient(client); 17 setConnected(true); 18 }; 19 20 const showGreeting = (message: string) => { 21 console.log(greetings); // ① [] で固定されている 22 const tmp = greetings.slice(); 23 tmp.push(message); 24 setGreetings(tmp); 25 }; 26 27 const sendName = () => { 28 console.log(greetings); // ② [Hello, Taro!] 本来sendするごとに要素は増えていってほしいが①で固定されているため常に1要素しかない 29 stompClient?.send('/app/hello', {}, JSON.stringify({ name })); 30 }; 31 32 const handleName = (event: React.ChangeEvent<HTMLInputElement>) => { 33 setName(event.target.value); 34 }; 35 36 // return <>.....</> 37
connect
を呼び出すsendName
で/app/hello
を呼び出す -> サーバから/topic/greetings
にMESSAGEが送られる。- 送られたメッセージを購読し、
showGreeting
でstateに追加格納する。
流れとしては上記のことをしたいのですが、ソース内①,②のとおりshowGreeting
内で使用しているgreetings
が初期値で固定されてしまうため順次追加していくということができません。
おそらくsubscribe
時に渡した情報が残っているのだと考えているのですが、解決方法を教えていただけますと幸いです。
補足情報(FW/ツールのバージョンなど)
react: 18.2.0
sockjs-client: 1.6.1
stompjs: 2.3.3

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/09/30 00:13