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

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

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

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Socket.IO

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

0回答

749閲覧

socket.io,express,nuxt.jsを使って表示をリアルタイムで更新できない

big_sky

総合スコア23

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Socket.IO

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

0クリップ

投稿2021/03/04 13:53

外部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の中では変化しません。

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

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問