vuejs - 구성 요소 간에 웹 사이트 연결 공유

vuejs - 구성 요소 간에 웹 사이트 연결 공유

작은 것부터 시작vuejs신청서루트 구성 요소에서와 같이 웹 소켓 연결을 열고 다른 구성 요소에서 동일한 연결을 다시 사용하는 방법

나는 같은 연결을 통해 부품들이 송수신할 수 있기를 바란다.이러한 구성요소는 루트 구성요소와 경로에 대해 렌더링된 구성요소 사이에 직계 부모 관계가 없도록 경로에 연결된다.

App.vue:

<template>
  <div id="app">
    <h1>My app</h1>
    <router-link to="/">P&L</router-link>
    <router-link to="/other-page">other page</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {

  name: 'app',
  data () {
    return {
      ws: null
    }
  },

  created () {
    this.ws = new WebSocket('ws://localhost:8123/ws')
  },
  methods: {
    }
  }
}
</script>

이제 다시 사용하고 싶다.ws에other-page경로를 변경할 때마다 다시 연결되지 않도록.

새 js 파일 생성("/services/ws.js")웹 소켓 인스턴스를 만드십시오.

const WS = new WebSocket('ws://localhost:8080');
export default WS;

그런 다음 Vue 구성 요소에서 가져오십시오.

<script>
 import WS from '../services/ws';

 export default {
   // here WS is your websocket instance
 }
 </script>

이는 구성요소 간에 데이터를 공유하는 가장 간단한 방법이다(여기서는 다른 모듈에서 생성된 WS 인스턴스를 공유하기만 하면 된다).또한 Vue 방식 대신 컨트롤러(다른 모듈)에 모든 로직을 유지하여 MVC 스타일을 장착할 수 있다.

Vue mixin 또는 플러그인을 사용하면 다음과 같은 작업을 훨씬 쉽게 수행할 수 있다.

https://github.com/icebob/vue-websocket

모든 구성 요소 간에 하나의 소켓과 공유를 초기화하며, 구성 요소별로 이벤트 핸들러를 쉽게 추가할 수 있어 모듈화가 잘 된다.

소켓을 사용하지 않으려면 기본 웹세트를 사용하도록 수정하는 것은 그리 어렵지 않다.io; 또는 이 구문을 사용할 수 있지만, 나는 구문을 그렇게 좋아하지 않는다.

https://www.npmjs.com/package/vue-native-websocket

참조URL: https://stackoverflow.com/questions/42982802/vuejs-share-websocket-connection-between-components