Skip to content

Instantly share code, notes, and snippets.

@GabyL

GabyL/index.html

Forked from mayfer/index.html
Last active August 29, 2015 14:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save GabyL/64c5e94ec3a7ca47c0d8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save GabyL/64c5e94ec3a7ca47c0d8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @mayfer mayfer created this gist Feb 21, 2015.
    87 changes: 87 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,87 @@
    <!doctype>
    <html>

    <head>
    <title>hi</title>

    <style>
    body, html {
    background: #aaa;
    font-family: monospace;
    }

    .client {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    }

    </style>
    <script src="/socket.io/socket.io.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>


    var Main = function() {

    this.init_network = function() {
    this.socket = io();
    this.socket.on("newmessage", function(msg){
    $('body').append(msg).append('<br />');
    });
    this.socket.on("cursor", function(msg){
    var da_div = $('.'+msg.color);
    if(da_div.length == 0) {
    da_div = $('<div>').addClass('client').addClass(msg.color).css('background', "#" + msg.color).appendTo('body');
    }
    da_div.css({top: msg.y, left: msg.x});
    });
    }

    this.init_ui = function() {
    var socket = this.socket;
    $('form').submit(function(e){
    e.preventDefault();
    var msg = $('input[name="message"]').val();
    socket.emit("newmessage", msg);

    $('input[name="message"]').val('');
    $('body').append(msg).append('<br />');
    });

    $('body').on('mousemove', function(e) {
    var rect = this.getBoundingClientRect()
    var parentOffset = {
    top: rect.top + document.body.scrollTop,
    left: rect.left + document.body.scrollLeft
    }

    var x = e.pageX - parentOffset.left;
    var y = e.pageY - parentOffset.top;

    socket.emit('cursor', {x: x, y: y});
    });
    }

    return this;
    }

    $(document).ready(function(){
    var main = new Main();
    main.init_network();
    main.init_ui();
    });

    </script>
    </head>
    <body>
    <form>
    <input type='text' name='message' />
    <input type='submit' name='asd' value='Send' />
    </form>


    </body>

    </html>
    49 changes: 49 additions & 0 deletions server.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    // using express to handle routing
    var express = require('express');
    var app = express();

    // http server for loading html pages
    var http = require('http').Server(app);
    // socket.io for handling websockets
    var io = require('socket.io')(http)
    var path = require('path');


    app.get('/', function(req, res){
    res.sendFile(path.join(__dirname, 'index.html'));
    });
    // start node server
    http.listen(8888, function(){
    console.log('listening on *:8888');
    });
    app.use(express.static(__dirname));

    // event handler for when a client connects
    io.on('connection', function(socket){
    // socket ID is a unique identifier for this particular connection
    // it assigns a new one for every new browser connection, even if it's the same user.
    console.log(socket.id, "connected");

    // generate random hex color
    var color = ''+(Math.random()*0xFFFFFF<<0).toString(16);

    // cookies can be accessed as per usual from a socket connection
    console.log("cookies", socket.request.headers.cookie);

    // listen for messages from this client
    socket.on('newmessage', function(msg){
    console.log(msg);
    // broadcast the received message to all the other clients
    socket.broadcast.emit("newmessage", msg);
    });
    socket.on('cursor', function(msg){
    msg.color = color;
    // broadcast the message to ALL clients (including the sender)
    io.sockets.emit("cursor", msg);
    });

    socket.on('disconnect', function() {
    // remove this socket object from current online list
    console.log("disconnected", socket.id);
    });
    });