Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge of how to use HTML5 WebSockets. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

What is WebSockets?

WebSockets is a two-way communication technology in a (TCP) interface, PUSH technology type. At the same time, WebSockets will still be based on W3C standards, and so far, the latest versions of Chrome and Safari browsers already support WebSockets.

What will WebSockets replace?

WebSockets can replace Long Polling (PHP server-side push technology), which is an interesting concept. The client sends a request to the server. Now, the server does not respond to the data that is not ready, it will keep the connection open until the latest data is ready to be sent, and then the client receives the data and sends another request. This has its benefits: it reduces the latency of any connection, and there is no need to create a new connection when one connection is already open. But Long-Polling is not a fancy technology, it is still possible to request a pause, so a new connection will need to be established.

Some AJAX applications use these techniques-this is often due to low resource utilization.

Imagine what a great thing it would be if the server booted itself in the morning and sent data to clients that wanted to receive it without having to establish some connection ports in advance. Welcome to the world of PUSH technology!

Step 1: fix the WebSocket server

This tutorial will focus more on client-side creation than server-side execution and so on.

I use XAMPP based on windows 7 to run PHP locally. Phpwebsockets is the PHP WebSocket server. (in my experience, there are some minor problems with this version, I have made some changes to it and uploaded the source file to share with you.) the following different versions can also implement WebSocket, if one doesn't work, you can try another version or continue to read the tutorial below.

JWebSocket? (Java)

Web-socket-ruby (ruby)

Socket IO-node? (node.js)

Start the Apache server

Step 2: modify URLs and port

To modify the server based on your previous installation, here is an example from setup.class.php:

Browse the file and make changes where appropriate.

Step 3: start creating the client

Let's create a basic template, which is my client.php file:

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 label.

Step 5: WebSocket event

First, let's try and understand the concept of WebSocket events:

WebSocket event:

We will use three WebSocket events:

Onopen: when the interface is up, onmessage: when the message is received, onclose: when the interface is down.

How can we achieve this?

First create a WebSocket object

Then detect the event as follows

3}

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 check to see if the user's browser supports WebSocket. If not, we will add a link to the Chrome browser page.

As you can see, if the user's browser supports WebSocket, we will execute the connect () function. Here are the core functions, and we will begin to create open, close, and receive events.

We will define URL on our server.

You may find that there is no http in URL. Well, yes, this is a WebSocket URL that uses a different protocol. The following is an illustration of URL decomposition:

Let's move on to the connect () function and put the code in the try/catch block so that if there is something wrong with the code, we can let the user know. We create the WebSocket and pass the information to the message () function, which we'll explain later. We create our onopen, onmessage and onclose functions. It is important to note that we provide the user with port status, which is not required, but we put it in mainly to facilitate debugging.

CONNECTING = 0OPEN = 1CLOSED = 2

The message () function is simple enough to fill the chat log container with the text we want to present to the user. We make a paragraph (in the socket event function)

) tag to create the appropriate class, we have only one paragraph closing tag in the message function.

Current results

If you have followed the above tutorial step by step, good, we have created HTML/CSS templates, created and established Websocket connections, and kept users up to date by creating connections.

Step 7: send data

Now we have the submit button, but we also need to listen to the event when the user presses the keyboard and run the send function. The'13 'below is the ASCII code corresponding to the enter key.

Here is the send () function:

Here's what we need:

The extra code does the following work: checking whether the user has entered nothing but still clicks back, empties the input input box, and executes the message () function.

Close Socket

Turning off the Socket operation is fairly simple, as long as you add click event listeners to the disconnect button.

Complete JavaScript code

Step 9: run the WebSocket server

We need to enter some command lines, and XAMPP provides a more convenient shell option. Click the 'shell' button' in the XAMPP control panel and type: php-Q path\ to\ server.php now you have the WebSocket server running!

These are all the contents of the article "how to use HTML5 WebSockets". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.