Vue.js 구성 요소 내부에 웹 주소록 수신기 설정

Vue.js 구성 요소 내부에 웹 주소록 수신기 설정

나는 사이트에서 여러 번 사용할 구성요소를 만들었고 테이블의 행을 나타낸다.

이제 이 구성 요소의 각 인스턴스가 웹세트를 통해 수신된 메시지에 따라 자체 업데이트되기를 바란다.

나는 등록하려고 했다.onmessage남의 말을 경청하는 사람created()구성 요소의 방법, 그러나 이렇게는 작동하지 않는 것 같다. created()테이블의 각 행에 대해 호출되지만, 듣는 사람은 아무런 효과도 보이지 않는다.

내 "main" App.vue에 수신기를 등록하면 작동이 된다.하지만 내 컴포넌트에 넣어서 쉽게 그 속성에 접근할 수 있었으면 좋겠어.

내가 뭘 잘못하고 있는지 힌트 좀 줄래?

여기 내 구성 요소의 샘플이 있다.

<template>
<div class="feed-item">
  <div class="feed-element">{{feed.name}}</div>
  <div class="feed-element">{{feed.idle}}</div>
  <div class="feed-element">{{feed.unseen}}</div>
  <div class="feed-element">{{feed.last_message}}</div>
  <div class="feed-element">{{feed.page}}</div>
</div>
</template>

<style scoped>
/* ... */
</style>

<script>
  export default {
    name: 'feedItem',
    props: {feed: Object},
    created () {
      this.$options.sockets.onmessage = (data) => console.log(data)
    },
  }
</script>

그리고 나는 짐을 실었다.vue-native-websocket난 내 본보기야.js:

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

import VueNativeSock from 'vue-native-websocket'


Vue.use(VueNativeSock, 'ws://127.0.0.1:9000', {
  format: 'json',
  // store: store,
  reconnection: true,
  reconnectionDelay: 1000
})

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App },
})

참조URL: https://stackoverflow.com/questions/57382748/setting-up-websocket-listener-inside-of-vue-js-component