Websockets questions

Discussion in 'JavaScript' started by mathias, Jan 24, 2012.

  1. #1
    Hi there,

    I am trying to let 2 browser windows communicate with each other. On one page the url looks like this "?page=view.php&id=234#step10". Now this is the page where someone can view a slideshow.

    In the other browser window I want a person to be able to change the step (or the current slide of the presentation) using a url that looks likes this "?page=manage.php&id=234". This page would display a previous and next button.

    The second window should send an event to the first window telling it to go to the next step (step 11). I've looked at websockets but don't really know of this is the way to go. Is there anyone who has experience with this and knows what the best solution is?

    Kind regards!
     
    mathias, Jan 24, 2012 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    540
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    To control a presentation window on a pc from another machine?

    I think not many browsers have supported the new HTML5's websocket yet,
    so doesn't using ajax suffice or is it just too slow?
     
    hdewantara, Jan 25, 2012 IP
  3. taipres

    taipres Peon

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You can find websocket libraries out there that either use websockets if supported, or fall back to other methods like ajax. I think ajax is fine depending on the scale.
     
    taipres, Jan 25, 2012 IP
  4. mathias

    mathias Active Member

    Messages:
    692
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    55
    #4
    I ave no idea how I would do this using AJAX to be honest hdewantara. I've managed to get it working with websockets but I'm stuck again. I can't seem to execute a function from an included .js file!

    I have the following in my index.html file (and I have to include the impress.js file at the end):

    
    
    <!DOCTYPE html>
    <html>
    <head>
    
    <script> 
     	$(document).ready(function()
    	{
      	    selectPrev();
    	});
    </script>
    
    </head>
    
    <body>
    
    <script src="impress.js"></script>
    
    </html>
    
    
    Code (markup):
    And as you can see I'm trying to call a function from the impress.js file (I've deleted all the other code to make the code look clean). I get an error in my error console saying "can't find variable selectPrev"...

    You can find the impress.js file over here: https://github.com/bartaz/impress.js/blob/master/js/impress.js
     
    mathias, Jan 28, 2012 IP
  5. hdewantara

    hdewantara Well-Known Member

    Messages:
    540
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #5
    Wow...
    the http://bartaz.github.com/impress.js is really impressive. But I think the author intends this not to be used in a remote widget/ application. Maybe, you should consider this one https://github.com/ericduran/impress.js from Eric Duran. He called it remoteImpress, because it uses Bartaz's Impress.js to work remotely, controlled from a mobile device?

    By the way, this person might have the same problem as you: http://stackoverflow.com/questions/8904828/how-can-i-add-go-to-the-next-slide-in-impress-js :)
     
    Last edited: Jan 29, 2012
    hdewantara, Jan 29, 2012 IP
  6. hdewantara

    hdewantara Well-Known Member

    Messages:
    540
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #6
    Okay....
    here's my ajaxian presentation demo.

    Click this http://smokingscript.com/test/mathias/presentation.html in a browser window and http://smokingscript.com/test/mathias/controller.html in another window. Then, try control the presentation by clicking prev/next buttons in the controller window.

    Unfortunately it only works for Safari 5 and Chrome 15,
    and also... I don't have enough computers to test it remotely.

    Basically, the controller window will send commands (previous/ next command) to server.php whenever a user click the prev/next buttons.
    Server.php will then saves them into a file, named as cmd.txt.

    The presentation window would also query server.php for any new commands at 1000 msecs interval.
    Server.php will check cmd.txt, and respond back to presentation window by sending the new commands.

    Oh one more thing, I have to modify impress.js to make this work because I couldn't find any other ways.
    Not using the selectPrev(), neither using keydown event triggering (as suggested in that stackoverflow link I gave you).

    My way is one quick and dirty I guess... :) Have fun!

    Hendra
     
    Last edited: Jan 29, 2012
    hdewantara, Jan 29, 2012 IP