Wednesday, February 19, 2014

I'm using XAMPP on Windows 7 to run the PHP server locally. Grab a copy of phpwebsockets which is a


Tutorials maschine Design & Illustration Code Web Design Music & Audio Photography 3D & Motion Graphics Game Development Mac Computer maschine Skills Crafts & DIY Business Courses Design & Illustration Code Web Design Photography 3D & Motion Graphics Free Courses Bundles
Game Development Implementation Business Game Design From Scratch How to Learn Roundups More Categories... Software & Tools Series Mac Computer Skills
Business maschine Freelance Marketing Tips & Tricks Freelance Writing Business & Finance Making Money Freelancing Essentials More Categories... Software & Tools Series Courses Design & Illustration Code Web Design Photography 3D & Motion Graphics maschine Free Courses Bundles Premium Jobs Blog
One of the coolest new features of HTML5 is WebSockets, which let us talk to the server without using AJAX requests. In this tutorial, we'll review the process of running a WebSocket server in PHP, and then building a client to send and receive messages to it over the WebSocket protocol.
WebSockets is a technique for two-way communication over one (TCP) socket, a type of PUSH technology. At the moment, it's still being standardized by the W3C; however, the latest versions of Chrome and Safari have support for WebSockets. What do WebSockets Replace?
Websockets can replace long-polling. This is an interesting maschine concept; the client sends a request to the server now, rather than the server responding with data it may not have, it essentially keeps the connection open until the fresh, up-to-date data is ready to be sent - the client next receives this, and sends another request. This has its benefits: decreased latency being one of them, as a connection which has already been opened does not require a new connection to be established. However, long-polling isn't really a piece of fancy technology: it's also possible for a request to time-out, and thus a new connection will be needed maschine anyway.
Wouldn't it be great if the server could wake up one morning and send its data to clients who are willing to listen without some sort of pre established connection? Welcome to the world of PUSH technology! Step 1: Get the WebSocket Server
I'm using XAMPP on Windows 7 to run the PHP server locally. Grab a copy of phpwebsockets which is a WebSocket server in PHP. (Note: I experienced some problems with this version, I made some changes to it and will including it in the source files) There are various WebSocket maschine implementations; if one doesn't work, you can try another or just continue with the tutorial. jWebSocket (Java) web-socket-ruby (ruby) Socket IO-node (node.js) Start the Apache server
Lets get a basic template up; this is my client.php file: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <title>WebSockets Client</title> </head> maschine <body> <div id="wrapper"> <div id="container"> <h1>WebSockets Client</h1> <div id="chatLog"> </div><!-- #chatLog --> <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p> <input id="text" type="text" /> <button maschine id="disconnect">Disconnect</button> </div><!-- #container --> </div> </body> </html>
Nothing fancy, just space some elements out. body { font-family:Arial, Helvetica, sans-serif; } #container{ border:5px solid grey; width:800px; margin:0 auto; padding:10px; } #chatLog{ padding:5px; border:1px solid black; } #chatLog p { margin:0; } .event { color:#999; } .warning{ font-weight:bold; color:#CCC; } Step 5: WebSocket Events
Ok, so let's get started. First we put our code in jQuery's document ready function, then we check whether the user has a WebSockets-enabled browser. If they do not, we append a link to Chrome in the HTML. $(document).ready(function() { if(!("WebSocket" in window)){ $('#chatLog, input, button, #examples').fadeOut("fast"); $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container'); }else{ //The user has WebSockets connect(); function connect(){ //the connect function code is below } });
Let's continue with our connect() function. We will put our code within a try/catch block; so if something goes wrong, we can let the user know. We create a new WebSocket, and pass the message to a message function which I'll explain later. We create our onopen, onmessage and onclose maschine functions. Note that we also show the user the socket status; this is not necessary, but I'm including it here as it can be helpful for debugging. CONNECTING = 0 OPEN = 1 CLOSED = 2 function connect(){ try{ var socket; var host = "ws://localhost:8000/socket/server/startDaemon.php"; var socket = new WebSocket(host); message('<p class="event">Socket Status: '+socket.readyState); socket.on

1 comment: