PeerJS with Vue.js : Error in v-on handler: "TypeError: Cannot read property 'on' of undefined"

I’m trying to figure out how to make PeerJS working with Vue.js:
https://peerjs.com/docs.html#start

This is the Vue file:

<template>
  <div>
    <p>My Peer Id : {{ myPeerId }}</p>
    <hr>
    <p>Remote Peer Id
      <input v-model="remotePeerId">
    </p>
    <hr>
    <p button @click="connect()">Connect to my friend!</p>
    <hr>
    <div class="col-xs-12 col-sm-6">
      <h3>Received Messages</h3>
      <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({ id: 'this.myPeerId', key: 'lwjd5qra8257b9' })
        this.myPeer.on('open', (id) => {
          console.log('Connected at PeerJS server with success')
          console.log('My peer ID is: ' + id);
          this.connecting = false
        })
      },
      computed: {
      },
      methods: {
        connect() {
          if (this.remotePeerId.trim().length) {
            this.connection = this.myPeer.connect(this.remotePeerId)
            // Receive messages:
            this.connection.on('data', (data) => {
              this.connection.on('data', data => this.messages.push(data))
            })
          }
        },
        sendMessage() {
          const newMessage = {
            id: this.myPeerId,
            message: this.message
          }
          if (this.connection) {
            this.connection.send('Hello')
          }
          this.messages.push(newMessage)
          this.message = ''
        }
      },
      filters: {
      }
    }
</script>

But it outputs the error message: Error in v-on handler: “TypeError: Cannot read property ‘on’ of undefined”

How to solve the problem?

this.connection = this.myPeer.connect(this.remotePeerId)
// Receive messages:
this.connection.on('data', (data) => {
  this.connection.on('data', data => this.messages.push(data))
})

I this.connection really set to a value? Try console.log(this.connection) after setting it. Why the this.connection.on inside the other this.connection.on?

Hi Johan,

I put the console.log :

    connect() {
      if (this.remotePeerId.trim().length) {
        this.connection = this.myPeer.connect(this.remotePeerId)
        console.log(this.connection)
        // Receive messages:
        this.connection.on('data', (data) => {
          this.connection.on('data', data => this.messages.push(data))
        })
      }
    },

But no output from console.log :

Yes it is. See the line undefined before the red block. You can make it more clear by using:

console.log('connection', this.connection)

So the problem is that this.myPeer.connect(this.remotePeerId) returns undefined. One error in your code is this.myPeer = new Peer({ id: ‘this.myPeerId’, key: … The ’ (apostrofs) around this.myPeerId shouldn’t be there.

What does it mean this ouput? :

  created() {
    this.myPeerId = (Math.random() * 6 + Math.random()).toString(36).replace('.', '');
    this.myPeer = new Peer({ id: this.myPeerId, key: 'lwjd5qra8257b9' })
    console.log('this.myPeer.id: ' + this.myPeer.id + ' this.myPeer.key: ' + this.myPeer.key)
    this.myPeer.on('open', (id) => {
      console.log('Connected at PeerJS server with success')
      console.log('My peer ID is: ' + id);
      this.connecting = false
    })
  },

Output:
this.myPeer.id: null this.myPeer.key: undefined

A small step forward:

With this Peerjs.vue :

<template>
  <div>
    <p>My Peer Id : {{ myPeerId }}</p>
    <hr>
    <p>Remote Peer Id
      <input v-model="remotePeerId">
    </p>
    <hr>
    <p button @click="connect()">Connect to my friend!</p>
    <hr>
    <div class="col-xs-12 col-sm-6">
      <h3>Received Messages</h3>
      <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()
        this.myPeer.on('open', (id) => {
          console.log('Connected at PeerJS server with success')
          console.log('this.myPeer.id: ' + this.myPeer.id + ' this.myPeer.key: ' + this.myPeer.key)
          console.log('My peer ID is: ' + id);
          this.connecting = false
        })
      },
      computed: {
      },
      methods: {
        connect() {
          if (this.remotePeerId.trim().length) {
            this.connection = this.myPeer.connect(this.remotePeerId)
            console.log('connection', this.connection)
            // Receive messages:
            this.connection.on('data', (data) => {
              this.connection.on('data', data => this.messages.push(data))
            })
          }
        },
        sendMessage() {
          const newMessage = {
            id: this.myPeerId,
            message: this.message
          }
          if (this.connection) {
            this.connection.send('Hello')
          }
          this.messages.push(newMessage)
          this.message = ''
        }
      },
      filters: {
      }
    }
</script>

This is the output:

1 Like