vuex 및 Vue-native-websocket 플러그인에서 WebSockets 데이터 수신

vuex 및 Vue-native-websocket 플러그인에서 WebSockets 데이터 수신

저는 현재 Vue와 Vuex를 포함하는 Quasar V1 프레임워크를 사용하고 있습니다.오늘 이 플러그인을 보았습니다.https://www.npmjs.com/package/vue-native-websocket/v/2.0.6

이 플러그인의 셋업 방법과 동작 방법을 잘 모르겠습니다.Vue에서 WebSockets를 사용하는 것은 처음이기 때문에 올바르게 동작하고 있는지 확인하기 위해서는 약간의 도움이 필요합니다.

처음에 npm 경유로 vue-native-websocket을 설치하고 src\boot\websocket.js라는 부트 파일을 만들었습니다.

다음 명령어를 사용하여 설정합니다.

npm install vue-native-websocket --save

websocket.syslog

import VueNativeSock from 'vue-native-websocket';

export default async ({ Vue }) => {
  Vue.use(VueNativeSock, 'wss://echo.websocket.org', {
    reconnection: true,
    reconnectionAttempts: 5,
    reconnectionDelay: 3000
  });
};

Quasar v1에서는 다음 위치에 "웹소켓"이라는 모듈을 만들었습니다.

src\store\websockets

이 모듈에는 다음이 있습니다.

actions.js
getters.js
index.js
mutations.js
state.js

웹 소켓을 'json'이 활성화된 형식으로 사용해야 합니다.

질문입니다.

웹 소켓 연결을 만들고 라이브 데이터를 받는 페이지가 있다고 가정해 보겠습니다. 이렇게 할까요?

모듈 코드: websockets/mutations.js:

export function SOCKET_ONOPEN (state, event) {
  let vm = this;
  vm.prototype.$socket = event.currentTarget;
  state.socket.isConnected = true;
}
export function SOCKET_ONCLOSE (state, event) {
  state.socket.isConnected = false;
}
export function SOCKET_ONERROR (state, event) {
  console.error(state, event);
}
// default handler called for all methods
export function SOCKET_ONMESSAGE (state, message) {
  state.socket.message = message;
}
// mutations for reconnect methods
export function SOCKET_RECONNECT (state, count) {
  console.info(state, count);
}
export function SOCKET_RECONNECT_ERROR (state) {
  state.socket.reconnectError = true;
}

모듈 코드: 웹 소켓/상태.js

export default {
  socket: {
    isConnected: false,
    message: '',
    reconnectError: false
  }
};

하지만 지금 문제는 제 vue 페이지에 있습니다.

특정 이벤트가 있는 웹 소켓의 데이터만 표시한다고 칩시다.vue 페이지 자체에서는 어떻게 불러야 합니까?플러그인의 이 부분이 매우 혼란스럽습니다.

데이터 송수신을 어떻게 구분해야 하는지 제가 알아야 할 것은 무엇입니까?즉, 다수의 사용자 목록을 받거나 모든 뉴스의 목록을 받거나 데이터베이스에 새 사용자를 추가할 수 있습니다.

채널, 이벤트 및 구독에 대해 계속 듣고 있습니다...제가 알기로는 먼저 채널을 구독해야 합니다(예: wss://mywebsite.com/news), 다음 이벤트를 청취합니다. 이 경우 이벤트는 단순히 이 채널로부터의 데이터 흐름이라고 생각합니다).

위의 내용이 맞다면, 이 플러그인으로 어떻게 채널을 구독하고 이벤트를 들을 수 있을까요?

빠른 예시가 있으면 좋겠습니다.감사합니다.

Vue-native-websocket 플러그인을 사용하여 채팅 어플리케이션을 개발했습니다.여기에서는 vuex 스토어에 pulgin을 등록하는 방법과 vue 컴포넌트에서 pulgin을 호출하는 방법을 보여 줍니다.

순서 1: 에서 다음 방법을 정의합니다.index.js file

const connectWS = () => {
  vm.$connect()
}
const disconnectWS = () => {
  vm.$disconnect()
}

const sendMessageWS = (data) => {
  if (!Vue.prototype.$socket) {
    return
  }
  Vue.prototype.$socket.send(JSON.stringify(data))
}

2단계: 소켓 상태 및 돌연변이 기록

SOCKET_ONOPEN (state, event) {
  if (!state.socket.isConnected) {
      Vue.prototype.$socket = event.currentTarget
      state.socket.isConnected = true
      let phone = state.config.selectedChatTicket.phone
      sendMessageWS({type: WSMessageTypes.HANDSHAKE, data: {id: window.ACCOUNT_INFO.accId, phone: phone, agentId: USER_NAME}})
    }
},
SOCKET_ONCLOSE (state, event) {
  console.log('SOCKET_ONCLOSE', state, event)
  state.socket.isConnected = false
  Vue.prototype.$socket = null
},

// NOTE: Here you are getting the message from the socket connection

SOCKET_ONMESSAGE (state, message) {   
 state.data.chatCollection = updateChatCollection(state.data.chatCollection,message)
},

스텝 3: 액션 쓰기.vue 컴포넌트에서 호출할 수 있습니다.

NOTE:: socket actions to connect and disconnect

WSConnect ({commit, state}) {
  connectWS()
},
WSDisconnect ({commit, state}) {
  disconnectWS()
},

순서 4: 스토어 오브젝트가 필요하기 때문에 마지막에 플러그인을 등록한다.

Vue.use(VueNativeSock, `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://www.example.com/socketserver`,
  { store: store, format: 'json', connectManually: true })

스텝 5: vue 컴포넌트에서 액션을 호출합니다.

buttonClick (rowData) {        
   const tickCount = this.ticketClickCounter
   if (tickCount === 0) {
      this.$store.dispatch('WSConnect')
   } else {
      this.$store.dispatch('WSDisconnect')
       setTimeout(() => {
          this.$store.dispatch('WSConnect')
        }, 1000)
    }
   this.ticketClickCounter = tickCount + 1
},

이제 소켓에 연결되었습니다.

스텝 6: vuex 파일에 액션 메서드를 쓴다.

sendChatMessageAction ({commit, state}, data) {
      // NOTE: Here, you are sending the message through the socket connection
   sendMessageWS({
        type: WSMessageTypes.MESSAGE,
        data: {
          param1: abc,
          param2: xyz,
          param3: 123,
          param4: $$$
       }
   })
},

스텝 7: 입력 텍스트박스를 정의하고 evenlister를 입력하면 액션 메서드를 호출할 수 있습니다.

onEnter (event) {        
 if (event.target.value !== '') {
    let newValue = {
        param1: Date.now(),
        param2: xyz,
        param3: 123,
     }
     this.$store.dispatch('sendChatMessageAction', newValue) // Action
  }
},

언급URL : https://stackoverflow.com/questions/57451148/receive-websockets-data-from-vuex-and-vue-native-websocket-plugin