Name: socket-penguin-club
Owner: Hacksu
Description: null
Created: 2018-02-03 23:16:28.0
Updated: 2018-02-09 18:25:39.0
Pushed: 2018-02-06 04:24:27.0
Homepage: null
Size: 1092
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
SocketIO is a javascript library that allows real-time two way communication between a client and server.
init
install express --save
install socket.io --save
clone https://github.com/hacksu/socket-penguin-club.git
install
app.js
SocketIO has two main operations, sending data and recieving data.
To send data, use the emit() method passing in the name of the
of the event and the data object to send.
socket.emit('event', data);
To recieve data, create an event handler using the on() method.
The first parameter should be the name of the event and the second
parameter is a function to handle the data.
socket.on('event', (data) => {
// Do operations here.
});
tion onClientConnect(socket) {
nts.push({
conn: socket
ole.log('clients connected: ' + clients.length);
function onClientDisconnect(socket) {
var numClients = clients.length;
clients = clients.filter(item => item.conn !== socket);
console.log('client disconnected ' + numClients + ' => ' + clients.length);
}
io.on('connection', (socket) => {
onClientConnect(socket);
socket.on('disconnect', () => {
onClientDisconnect(socket);
});
});
end a message from the client.
<input onclick=“sendMessage()”
value="Send a message"
type="button"
/>
...
<script>
function sendMessage() {
socket.emit('message', 'A test message');
}
</script>
isten for a message on the server.
socket.on('message', (msg) => {
console.log(msg);
});
orward message to all connected clients
socket.on('message', (msg) => {
for (var i = 0; i < clients.length; i++){
clients[i].conn.emit('fwd:msg', msg);
}
});
ecieve forwarded messages clientside.
aving some fun
dd some resources to the head of our HTML.
...
<script src="/mechanics.js"></script>
<link rel="stylesheet" href="/style.css"></link>
ender our character on the screen.
<img src="/penguin.gif" class="penguin" id="me" />
ove our socket code into mechanics.js inside the `window.onload` callback function.
window.onload = () => {
// Put socket code here.
};
et a reference to our character and wire it up in the key press handlers so that he moves.
var me = penguin(document.getElementById('me'));
...
document.addEventListener('keydown', event => {
if (event.keyCode == 87){
// Up key
console.log('up');
me.up(); // <--- This line.
}
// Fill out the others too.
...
end the move data to the server in `update()`.
socket.emit('move', {
xPos: x,
yPos: y
});
n the server, add a handler for the move event that sends the player number and the move to each of the other clients.
socket.on('move', (location) => {
for (var i = 0; i < clients.length; i++){
clients[i].conn.emit('fwd:move',{
player: socket.clientNum,
loc: location
} );
}
});
isten for fowarded movements clintside and move the sprites accordingly.
socket.on('fwd:move', move => {
console.log(move);
if (me.id === move.player) return;
moveOrCreatePenguin(move);
});
dd some player ids to the server to keep track of clients.
var currentClientNum = 0;
io.on('connection', (socket) => {
socket.clientNum = currentClientNum;
currentClientNum++;
onClientConnect(socket);
socket.emit('playerId', socket.clientNum);
...
dd a short handler to update your player number.
socket.on('playerId', id => {
me.id = id;
});
And finally, remove penguins when someone disconnects.
/// client side
socket.on('fwd:disconnect', playerId => {
console.log(playerId);
var toRemove = penguins.find(p => p.player === playerId);
if (toRemove) {
document.body.removeChild(toRemove.sprite);
}
penguins = penguins.filter(p => p.player !== playerId);
});
And on the serverside too.
/// server side, update onDisconnect to look like this.
socket.on('disconnect', () => {
onClientDisconnect(socket);
for (var i = 0; i < clients.length; i++){
clients[i].conn.emit('fwd:disconnect', socket.clientNum);
}
});
that secret sauce of debugging, and voilą! A basic club penguin rip off.
ompleted Code
complete project can be found on Github at: https://github.com/hacksu/socket-penguin-club/tree/completed
hallenge
te a speech bubble and show a message for a penguin. Maybe even with [browser notifications](https://developer.mozilla.org/en-US/docs/Web/API/notification)?