upstox-nodejs icon indicating copy to clipboard operation
upstox-nodejs copied to clipboard

how to use websocket

Open hinditutorpoint opened this issue 1 year ago • 0 comments

Hi here we have issue and connection could not create we have try with vue js

<script setup>
  import { useWebSocket } from '@vueuse/core'

  const message = ref('');
  const messages = ref([]);
  const replies  = ref([]);
  const token = 'key';
  const websocketUrl = `wss://api.upstox.com/v2/feed/portfolio-stream-feed/authorize?access_token=${token}`;

  const { status, data, send, open, close } = useWebSocket(websocketUrl);

  onMounted(() => {

  });

  const sendMessage = () =>
  {
    send(message.value);
    messages.value.push(message.value);
    message.value = '';
  }

  watch(data, (newData) => {
    if (newData) {
      replies.value.push(newData);
    }
  });
</script>
<template>
  <VRow>
    <VCol cols="12">
      <VCard title="Market data">
        <VCol cols="12">
          <VTextField
            v-model="message"
            autofocus
            autocomplete="message"
            placeholder="enter message here"
            label="Message"
            type="text"
          />
        </VCol>
        <VCol cols="12">
          Conection State: {{ status }}
        </VCol>
        <VCol cols="12">
          <v-row>
            <v-col cols="auto">
              <v-btn type="button" @click="sendMessage()">
                Send Message
              </v-btn>
            </v-col>

            <v-col cols="auto">
              <v-btn type="button" @click="open()">
                Open
              </v-btn>
            </v-col>
            <v-col cols="auto">
              <v-btn type="button" @click="close()">
                Close
              </v-btn>
            </v-col>
          </v-row>
        </VCol>
        <VCol cols="12" class="pa-3">
          <VRow class="d-flex flex-wrap">
            <VCol cols="6" class="pa-3">
              Send List of messages:
              <pre>{{ messages }}</pre>
            </VCol>
            <VCol cols="6" class="pa-3">
              Recieved List of messages:
              <pre>{{ replies }}</pre>
            </VCol>
          </VRow>
        </VCol>
      </VCard>
    </VCol>
  </VRow>
</template>

above snippet have some testing purpose actually we want to impalements in app

hinditutorpoint avatar May 23 '24 18:05 hinditutorpoint