socket icon indicating copy to clipboard operation
socket copied to clipboard

P2P not working in vue app

Open gowram opened this issue 1 year ago • 10 comments

Vue js app with P2P not working..

i have build application with v0.3.3 with vue.js it is loading fine in both Desktop (ubuntu) and mobile but communication not happening between two devices.

I have uploaded my code for your review, https://github.com/gowram/sscvue

@heapwolf please, let me know what is missing here....

gowram avatar Jun 23 '23 15:06 gowram

@gowram please point to a repo or a gist. No one will open a zip file.

heapwolf avatar Jun 23 '23 16:06 heapwolf

  • @heapwolf create git repo... https://github.com/gowram/sscvue

gowram avatar Jun 24 '23 01:06 gowram

team, any update on this? I would like to know what is missing from my setup...

<script setup>
import { Peer } from 'socket:peer'
import { ref, onMounted } from 'vue'



onMounted(async () => {
  const pair = await Peer.createKeys()
  const clusterId = await Peer.createClusterId()
  peer = new Peer({ ...pair, clusterId })
  peer.join()
  peer.on('greeting', (data, ppr, address, port) => {
    clr.value = "color = " + data.color;
    if (peer.peer.address !== ppr) {
      console.log('remote on...')     
    }
    setColor(data.color)
  })
})

defineProps({
  msg: String,
})

const count = ref(0)

let peer = ref("")
let ip = ref("loading....")
let clr = ref("black")

const setColor = c => document.body.style.backgroundColor = `#${c}`

function setBgColor() {
  const color = Math.floor(Math.random() * 16777215).toString(16)
 
  peer.emit('greeting', {
    'color': color,
    'timestamp': Date.now()
  })
  setColor(color);
  ip.value = peer?.peer?.address
} 
</script>

<template>
  <h1>{{ msg }}</h1>
  <h2>{{ ip }}</h2>
  <h3>{{ clr }}</h3>
  <div class="card">
    <button type="button" @click="setBgColor">Change Color</button>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>`

gowram avatar Jun 27 '23 08:06 gowram

Try using the same clusterId and key pair between devices that you want to connect.

RGBboy avatar Jun 27 '23 22:06 RGBboy

@RGBboy I tried with same clusterId and keypair between devices, Still it's not working..

peer.on itself not getting listened, if i use same clusterId and keypair.

is there any documentation available?

gowram avatar Jun 28 '23 13:06 gowram

Just to add to this, also trying to set up a demo. Not using vue but in vanilla js I'm not seeing theawait peer.join() function ever return. I'm using a shared clusterId. I'm not sure why I would use the same keypair on the two clients. Testing between a Mac and iPhone on the same network.

Source code is at https://github.com/sheldonth/perchd/blob/main/src/index.js if anyone can help. Much appreciated.

sheldonth avatar Aug 29 '23 00:08 sheldonth

today's merge will add the fix to main branch

heapwolf avatar Aug 29 '23 06:08 heapwolf

@heapwolf is there any update on this issue?

gowram avatar Oct 10 '23 05:10 gowram

Was this fixed?

chicoxyzzy avatar Dec 19 '23 13:12 chicoxyzzy

Was this fixed?

not yet

lamiazar avatar Dec 19 '23 13:12 lamiazar