外部APIから取得したデータをsocket.ioを使ってフロントにpushし続けてそれを画面でリアルタイムで更新され続けるようにしたいのですが、上手くいきません。
vscodeのターミナルでは取得したデータをconsole.logで確認出来ています。
出来たこと
サーバー側でフロントにデータを送り続ける(無限ループで実装しています)
フロント側でそれを取得する
devtoolsで変数がvueインスタンスに紐づいていることを確認した
出来ないこと
取得したデータを画面で更新され続けるようにする
express 4.17.1
node 12系
socket.io: 3.1.2
socket.io-client: 3.1.2
nuxt.js 2.15.2
backend
3030で待ち受け
index
1import * as express from 'express'; 2import { pushData } from "./module/hoge"; 3import { Socket } from "socket.io"; 4 5 6const APP = express(); 7 8const SERVER = APP.listen(3030, function() { 9 console.log(`Server started on port 3030`); 10}); 11 12const IO = require("socket.io")(SERVER); 13 14IO.on("connection", (socket: Socket) => { 15 console.log('Connected...'); 16 pushData(socket); 17}); 18
hoge
1export async function pushData(socket: Socket) { 2 try { 3 for (;;) { 4 const data = await 外部APIから取得する関数(今回は割愛) 5 if (!data.Messages) { 6 console.log("メッセージなし"); 7 continue; 8 } 9 console.log(data.Messages); 10 socket.emit("newdata", data.Messages) 11 } 12 } catch (e) { 13 console.log(e); 14 } 15} 16
front
localhost:8000で画面にアクセス
index
1<template> 2 <div class="container"> 3 <div> 4 //ここで更新され続けてほしい 5 <p>{{ box }}</p> 6 </div> 7 </div> 8</template> 9 10<script lang="ts"> 11import { Component, Watch, Vue } from 'vue-property-decorator'; 12import { io } from "socket.io-client"; 13 14@Component({ 15 name: "Test", 16}) 17export default class extends Vue { 18 private socket = io(`http://localhost:3030`); 19 private box: any = ""; 20 21 created() { 22 this.getList(); 23 } 24 25 private getList() { 26 this.socket.on("newdata", (fetchedData: any) => { 27 //ここで取得できていることを確認できた 28 console.log(fetchedData); 29 this.box = fetchedData; 30 //ここでboxに入っていることも確認できた 31 console.log(this.box); 32 }) 33 } 34} 35 36</script> 37
private getList とthis.socket.onの間で
this.box = "hoge"
と入れると画面にhogeと変化することは確認できてます。
ただthis.socket.onの中では変化しません。
どなたかご教授いただけると幸いです。
あなたの回答
tips
プレビュー