Cannot read property 'on' of undefined

[marcoippolito]

Hi!
in order to fully understand how to use peerjs with vuejs, I'm trying to replicate what you excellently you have done but without pug.

This my very easy Peerjs.vue:

<template>
  <div>
    <p>My Peer Id : {{ myPeerId }}</p>
    <p>Remote Peer Id
      <input v-model="remotePeerId">
    </p>
    <p button @click="connect()">Connect to my friend!</p>
    <form>
      <label>Message To Send:</label>
      <input v-model="message" type="text">
    </form>
    <p button @click="sendMessage()">Send Message!</p>
    <hr>
    <div class="col-xs-12 col-sm-6">
      <ul class="list-group">
        <li class="list-group-item" v-for="message in messages">Message: {{ message }}</li>
      </ul>
    </div> 
  </div>
</template>

<script>
    import Peer from 'peerjs';

    export default {
      data: () => ({
        connection: null,
        connecting: true,
        message: '',
        messages: [],
        myPeer: null,
        myPeerId: '',
        remotePeerId: ''
      }),
      created() {
        this.myPeerId = (Math.random() * 6 + Math.random()).toString(36).replace('.', '');
        this.myPeer = new Peer({ key: 'lwjd5qra8257b9' })
        this.myPeer.on('open', id => {
          console.log('Connected at PeerJS server with success')
          this.myPeerId = id;
          this.connecting = false
        })
        this.myPeer.on('connection', con => {
          this.connection = con
          con.on('open', () => {
            con.on('data', newMessage => this.messages.push(newMessage))
          })
        })
      },
      computed: {
      },
      methods: {
        connect() {
          if (this.remotePeerId.trim().length) {
            this.connection = this.myPeer.connect(this.remotePeerId)
            this.connection.on('open', () => {
              this.connection.on('data', newMessage => this.messages.push(newMessage))
            })
        }
      },
      sendMessage() {
        const newMessage = {
          id: this.myPeerId,
          message: this.message
        }
        if (this.connection) {
          this.connection.send(newMessage)
        }
        this.messages.push(newMessage)
        this.message = ''
      }
    },
    filters: {
    }
  }
</script>

When clicking to "Connect to my friend!" I get "Error in v-on handler: "TypeError: Cannot read property 'on' of undefined"

What's wrong with

    this.connection.on('open', () => {
      this.connection.on('data', newMessage => this.messages.push(newMessage))
    })

?

Looking forward to your kind help.
Marco

[mahenrique94]

Hi Marco, you code looks correct, can you share your repo with me? I'll to try simulate this problem here locally.

Tip: Add a console.log inside this.myPeer.on('connection' at the begin, before this.connection assignment:

this.myPeer.on('connection', con => {
    this.connection = con
    con.on('open', () => {
        con.on('data', newMessage => this.messages.push(newMessage))
    })
})

It must log a connection object.

[marcoippolito]

Hi!
I put everything here: https://github.com/marcoippolito/PeerJS-VueJS-Test

[mahenrique94]

Hi Marco, the problem it's peerjs version.

You're using a recent version, something need to be done of the new way.

Att, Matheus

[marcoippolito]

Hi Matheus,

after few trials, now it is working https://github.com/marcoippolito/PeerJS-VueJS-Test

[mahenrique94]

Hey Marco, nice man.

Well done.