Webjx article introduction: A cool new feature in HTML5 is WebSockets, which allows us to talk to the server without AJAX requests. Today, BinGo will allow everyone to run WebSocket through the server side of the Php environment, create clients, and send and receive server-side information through the WebSockets protocol. What are WebSockets? WebSockets are bidirectional in a (TCP) interface
A cool new feature in HTML5 is WebSockets, which allows us to talk to the server without AJAX requests. Today, BinGo will allow everyone to run WebSocket through the server side of the Php environment, create clients, and send and receive server-side information through the WebSockets protocol.
What are WebSockets?
WebSockets is a technology that performs bidirectional communication on a (TCP) interface, and a PUSH technology type. At the same time, WebSockets will still be based on the W3C standard. So far, the latest versions of Chrome and Safari browsers have already supported WebSockets.
What will WebSockets replace?
WebSockets can replace Long Polling (PHP server push technology), which is an interesting concept. The client sends a request to the server. Now, the server will not respond to the data that has not been prepared. It will keep the connection open until the latest data is ready to be sent. After that, the client receives the data and then sends another request. This has its benefits: reduce latency on either connection, and does not need to create another new connection when one connection is already open. But Long-Polling is not a fancy technique, and it is still possible that request pauses will occur, so a new connection will be required.
Some AJAX applications use the above-mentioned technology - which is often attributed to low resource utilization.
Just imagine how great it would be if the server would start up and send data to clients who would like to receive without having to set up some connection ports in advance! Welcome to the world of PUSH technology!
Step 1: Get the WebSocket Server
This tutorial will focus more on client creation rather than server execution.
I use XAMPP based on Windows 7 to implement running PHP locally. phpwebsockets is a PHP WebSocket server. (In my experience, there are some minor problems with this version. I have made some modifications to it and uploaded the source file to share with you.) The following different versions can also implement WebSocket. If one cannot be used, you can try other versions or continue to read the following tutorial.
jWebSocket (Java)
web-socket-ruby (ruby)
Socket IO-node (node.js)
Start the Apache server
Step 2: Modify URLs and ports
According to your previous installation, modify the server, the following is an example in setup.class.php:
}
Browse the file and make changes if appropriate.
Step 3: Start creating a client
Here is my client.php file:
><>
>
>
>
>eg try 'hi', 'name', 'age', 'today'>
>Disconnect>>
</html>
We have created the basic template: a chat log container, an input input box and a disconnected button.
Step 4: Add some CSS
There is no fancy code, just deal with the style of the tag.
Body
grey
}
Step 5: WebSocket Event
First let's try and understand the concept of WebSocket events:
WebSocket Events:
We will use three WebSocket events:
onopen: When the interface is opened
onmessage: When a message is received
onclose: When the interface is closed
How do we achieve this?
First create a WebSocket object
Then detect the event as follows
socket.
}
Do this when we receive the message:
socket.msgmsg); //Awesome!
}
But we still try to avoid using alert, and now we can integrate what we have learned into the client page.
Step 6: JavaScript
First, we put the code into the document.ready function of jQuery, and then we also need to check whether the user's browser supports WebSocket. If it is not supported, we will add a link to the Chrome browser page.
$
window
$.
$.
As you can see, if the user's browser supports WebSocket, we will execute the connect() function. Here is the core function, we will start creating open, close and receive events.
We will define the URL on our server.
You may find out why there is no http in the URL? Well, yes, this is a WebSocket URL that uses a different protocol. Here is a URL breakdown diagram: