HTML5 Websockets Development Guidance

Source: Internet
Author: User
Tags url example

1. WebSockets-- Full-duplex Communication

The main HTML5 pillars include Markup, CSS3, and JavaScript APIs

For whole set of HTML5, visit html5rocks.com (Google product)

The URL

The following image shows the WebSocket URL example in tokens:

Schema Host Port Server

ws://example.com:8000/chat.php

WSS are supported as well and are the WebSocket equivalent to HTTPS for secure connections (SSL).

Who ' s using WebSockets

Name Website Description

Gamooga Http://www.gamooga.com/Real-time backend for apps and games

Gitlive http://gitlive.com/Notifications on GITHUB projects

Superfeedr Http://superfeedr.com/Real-time Data pushing

Pusher http://pusher.com/Scalable real-time functionality API for Web and mobile AP Ps

Smarkets Https://smarkets.com/Real-time Betting

IRC Cloud https://www.irccloud.com/Chatting

Great resources containing a large variety of WebSocket demos are as follows:

http://www.websocket.org/demos.html

http://www.html5rocks.com/en/features/connectivity

2. The WebSocket API Web Client

WebSocket communication and data transmission is bidirectional, so we need both parties to establish IT:A Ser Ver and a client.

HTML5 Basics:

    • Markup HTML (. html)

For more information about the HTML5 markup, consider visiting http://html5doctor.com/. There is a complete reference for the supported HTML5 tags at http://html5doctor.com/element-index/.

    • Styling CSS (. css)

Http://www.css3.info/is a great resource for CSS3 and further reading.

    • Logic JavaScript (. js)

The markup defines the structure and the CSS rules apply the styling. What is about event handling and user actions? Well, here comes javascript! The WebSocket API is pure JavaScript, too!

WebSocket API allows connect to a local or remote server, listen for messages, send data, and CLO Se the connection. Typical WebSocket workflow shows below:

JavaScript provides an easy-to-find out whether a browser can execute websocket-specific code:

if (Window. WebSocket) {   //  validation check  console.log ("WebSockets supported.") );                                                // Continue with the rest of the websockets-specific functionality ... }else  {console.log ("WebSockets not supported.")  ); Alert ("Consider updating your browser for a richer experience.") );}

Want to see which browsers does support the WebSocket protocol? There is a up-to-date resource available at http://caniuse.com/#feat =websockets.

    • The WebSocket object : var socket = new WebSocket ("ws://echo.websocket.org");
    • Events: Open, Message, Close, and Error.

You can handle them either by implementing the OnOpen, OnMessage, OnClose, and onerror functions respectively, or by using The AddEventListener method.

    • Actions: The WebSocket protocol supports the main actions:send () and close ().
    • Properties:

Properties Description

URL Returns The URL of the WebSocket protocol Returns the protocol used by the server

ReadyState Reports The state of the connection and can take one of the following Selfexplanatory values:

Websocket.open

Websocket.closed

Websocket.connecting

Websocket.closing

Bufferedamount Returns The total number of bytes this were queued when the Send () method is called

Binarytype Returns The binary data format we

Received when the OnMessage event was raised

The Complete client example:

Index.html:

<!DOCTYPE HTML><HTML><Head><title>HTML5 WebSockets</title><Linkrel= "stylesheet"href= "Style.css" /><Scriptsrc= "Chat.js"></Script></Head><Body><H1>HTML5 WebSocket Chat.</H1><inputtype= "text"ID= "Text-view" /><inputtype= "button"ID= "Send-button"value= "send!" /><inputtype= "button"ID= "Stop-button"value= "Stop" /></BR><labelID= "Status-label">Status</label></Body></HTML>
View Code

Chat.js:

1Window.onload =function() {2 varTextView = document.getElementById ("Text-view");3 varButtonsend = document.getElementById ("Send-button");4 varButtonstop = document.getElementById ("Stop-button");5 varLabel = document.getElementById ("Status-label");6 varSocket =NewWebSocket ("ws://echo.websocket.org");7Socket.onopen =function(event) {8label.innerhtml = "Connection Open";9 }TenSocket.onmessage =function(event) { One if(typeofEvent.data = = = "string") { Alabel.innerhtml = label.innerhtml + "<br/>" +Event.data; - } - } theSocket.onclose =function(event) { - varCode =Event.code; - varReason =Event.reason; - varWasclean =Event.wasclean; + if(Wasclean) { -label.innerhtml = "Connection closed normally."; + } A Else { atlabel.innerhtml = "Connection closed with message:" + -Reason + "(Code:" + code + ")"; - } - } -Socket.onerror =function(event) { -label.innerhtml = "Error:" +event; in } -Buttonsend.onclick =function() { to if(Socket.readystate = =websocket.open) { + socket.send (textview.value); - } the } *Buttonstop.onclick =function() { $ if(Socket.readystate = =websocket.open) {Panax Notoginseng socket.close (); - } the } +}
View Code

Server side:

Server Client
Create a server on localhost:8181
Start Running
Initial Handshake:establish Connection <-----------Request connection
Handle the incoming message--------------------> Send message

Refer to Book (p.): http://www.amazon.com/getting-started-html5-websocket-programming/dp/1782166963

Create DLL file in C #

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.