Блог

Некоторое время назад на SO был похожий вопрос по этому поводу, хотя я безуспешно пытался найти ответы.

Я внедряю SPA, используя серверную часть Django и интерфейс Vue с интерфейсом Vue cli. Django использует каналы для отправки JSON через веб-сайт на интерфейс, интерфейс получает эти данные и должен обновлять таблицу.

Часть Джанго работает. Соединение с WebSocket подтверждено, и данные получены в Vue, хотя у меня есть две проблемы, которые я не смог найти способ решить:

1. Данные, находящиеся в переменной, не отображаются в таблице и
2. Интерфейс получает данные только один раз — я не знаю, как применить прослушиватель к WebSocket или в какой части моего приложения Vue, чтобы новые полезные данные (надеюсь, я говорю это правильно) были получены и соответственно обновлены.

Ниже я предоставил Django consumers.py файл, файл представления Signals.vue и консоль.вывод журнала показывает, что переменная действительно содержит объект JSON, несмотря на то, что таблица остается пустой.

У кого-нибудь есть представление о том, где я ошибаюсь и как я могу решить проблемы 1 и 2? Спасибо

Джанго consumers.py

 import json from channels.generic.websocket import WebsocketConsumer   class WSConsumer(WebsocketConsumer):  def connect(self):  self.accept()   self.send(json.dumps({  'id': 1,  'date': "date",  'marketOpen': "marketOpen",  'symbol': "symbol",  'trade': "trade",  'bias': "bias",  'status': "status"  }))  

Сигналы.vue

 lt;templategt;  lt;div class="container"gt;  lt;div class="columns is-multiline"gt;  lt;div class="column is-12"gt;  lt;h1 class="title"gt; Signalslt;/h1gt;  lt;/divgt;   lt;div class="column is-12"gt;  lt;table class="table is-fullwidth"gt;  lt;theadgt;  lt;trgt;  lt;thgt;Datelt;/thgt;  lt;thgt;Market Openlt;/thgt;  lt;thgt;Symbollt;/thgt;  lt;thgt;Tradelt;/thgt;  lt;thgt;Biaslt;/thgt;  lt;thgt;Statuslt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  lt;tr v-for= "signal in signals" v-bind:key="signal.id"gt;  lt;tdgt;{{ signal.date }} lt;/tdgt;  lt;tdgt;{{ signal.marketOpen }} lt;/tdgt;  lt;tdgt;{{ signal.symbol }} lt;/tdgt;  lt;tdgt;{{ signal.trade }} lt;/tdgt;  lt;tdgt;{{ signal.bias }} lt;/tdgt;  lt;tdgt;{{ signal.status }} lt;/tdgt;  lt;/trgt;  lt;/tbodygt;   lt;/tablegt;  lt;/divgt;    lt;/divgt;  lt;/divgt; lt;/templategt;  lt;scriptgt; export default {  name: 'Signals',  data() {  return {  signals: [],  connection: null  }  },  created() {  this.getSignals()  },  methods: {  getSignals() {  console.log("Starting connection to websocket")  this.connection = new WebSocket('ws://localhost:8000/ws/signals/')  this.connection.onmessage = (event) =gt; {  this.signals = event.data  console.log("Successfully retrieved message from websocket")  console.log(this.signals)  }  }  } } lt;/scriptgt;  

Приставка

 [HMR] Waiting for update signal from WDS... log.js?1afd  Starting connection to websocket Signals.vue?1d80  Unchecked runtime.lastError: The message port closed before a response was received. signals:1  Successfully retrieved message from websocket Signals.vue?1d80  {"id": 1, "date": "date", "marketOpen": "marketOpen", "symbol": "symbol", "trade": "trade", "bias": "bias", "status": "status"} Signals.vue?1d80