MouseSpeak

Mouse Events

Through simple tracking of the mouse position, we can get the coordinates and broadcast the location over PubNub to any other viewers. We can also listen for keystrokes to broadcast the text changes along with the mouse position coordinates.

Send Coordinates

With PubNub, it's simple to send arbitrary data in realtime, including screen coordinates. In this example, we can send JSON objects containing the x- and y- coordinates of a mouse position within a publish() call.

Don't forget to use your own publish and subscribe keys when initializing PubNub! If you don’t have one yet, sign up now to get your own unique keys!

pubnub.publish({ 
  channel : 'mouseMoves', 
  message : {
    x: 400,
    y: 200
  } 
});

Display Occupancy

You can also display the number of users online with our Presence Detection API. presence() receives user events including Join/Leave status changes. To use this optional API, you need to enable the feature on your Admin Dashboard and add the lines to your subscribe() call.

pubnub.subscribe({channels: [channel]});
pubnub.addListener({
  presence: function(m){
    document.getElementById('occupancy').textContent = m.occupancy;
  }
});

Blog Posts

• Doodle with Strangers! Multi-User HTML5 Canvas in 4 Steps

• Online Users Chatroom

Features Used

• Data Streams

• Presence