Custom Workspace Tutorial
In this tutorial we will show how you can customize a workspace by using html and javascript. To keep things simple we will implement a version of tic-tac-toe where users can invite each other to play the game.
To customize a Workspace it makes sense to start off with the basic workspace script with chat support. The basic script is a html document, css stylesheet, a file with the javascript code and graphics resources. Simply take that and place it on a webserver where it is accessible to anyone who connects to your workspace.
Set the workspace script url
Add a workspace and set the workspace script url.
Connect to the workspace
When you connect to the workspace you see the script running with basic chat functionality.
The Message API
A simple API with 3 functions is available for sending and receiving messages within the workspace.
| broadcast(aApplication, aMessage) |
Send a message to all users within a workspace except the user sending the message.
The function takes two arguments: Application is the name of your program/customization. "c" is reserved for chat messages. Message is the data you would like to send to a peer running your script. |
|---|---|
| transmit(aUser, aApplication, aMessage) |
A message is sent to one user within a workspace.
The function takes three arguments: User is the name of the peer you would like to send the message to. Application is the name of your program/customization. "c" is reserved for chat messages. Message is the data you would like to send to a peer running your script. |
| receive(aUser, aApplication, aMessage) |
After the above two messages
are sent, they are transferred by PeerAware and passed to the script through the receive function.
The function is called by PeerAware and passes three arguments: User is the name of the peer who sent the message. Application is the name of the program/customization. Message is the data sent by a peer running the script. |
The User Observation API
A simple API for monitoring that a user remains active in the workspace.
| observe(aFrom) | Observe a user, and get notified when the user leaves the workspace. |
|---|---|
| ignore(aFrom) | Stop observing a user. |
| userLeft(aUser) | PeerAware calls this function when an observed user leaves the workspace. |
The Invition List
To help users find an opponent we add a list of users who want to play. To make sure the list contains valid entries we make use of the user observation API. By calling observe(username) we set up a callback which will notify us in the event of a user leaving the workspace. Should that happen PeerAware will call the userLeft() function and we can clear the user from the invitation list.
The Game
The code for the game basically consists of keeping track of the score, and letting a player choose his next throw. Again we reuse the observe api and keep track of a the players so that we can close the game window if one of the players should become disconnected or decide to close the window. Otherwise we use transmit and receive to send the game state between players.
The Code
The code is available here
Tutorial workspace
Make sure you have PeerAware installed before cconnecting to the demo workspace