HTML5 new features for bidirectional push messages (such as web chat, mobile phone push messages, etc.)
Principle:
When new information is available, the server and the client can send messages to each other (real-time traffic from the "server" to "the client" and "the" server
Client
Description
ReadyState:
Connecting (0): Indicates that no connection has been established;
OPEN (1): The connection has been established and can be communicated;
CLOSING (2): Close the connection by closing the handshake;
CLOSED (3): The connection has been closed or cannot be opened;
Url:websocket the network address of the server, the protocol is usually "WS" or "WSS (encrypted communication)",
Event:
- Send: Sending data to the server side
- The Close method is to turn off the connection;
- OnOpen connection is established, that is, the handshake successfully triggered the event;
- OnMessage the event that is triggered when a server message is received;
- OnError event triggered by an exception;
Use examples:
Create a socket instance
var socket = new WebSocket ("ws://localhost:8080");
Open
the socket Socket.onopen = function (event) {
//Send an initialization message
socket.send ("I am the client and i\" M listening !");
Listener messages
Socket.onmessage = function (event) {
Console.log ("Client received a message", event);
};
The shutdown of the listening socket
socket.onclose = function (event) {
Console.log ("Client notified socket has closed", event); c15/>};
Close socket ....
Socket.close ()
}; Server-side
Jwebsocket (Java)
Web-socket-ruby (Ruby)
Socket Io-node (node.js)
The following
is described in Socket.io, Environment Description: (node.js installation See http://www.cnblogs.com/wishyouhappy/p/3647037.html)
1. Install Socket.io
npm install-g socket.io
2. Using require to introduce HTTP and Socket.io
var HTTP = require ("http");
var io= require ("Socket.io");
3. Create server
var server = http.createserver (function (request, response) {
R Esponse.writehead (200,{"Content-type": "Text/html"});
Response.Write ("WebSocket start~~~~~~~~~~~~");
Response.End ("");
}). Listen (8000);
4. Listens for
var socket= io.listen (server);
5. Example:
var http = require ("http");
var io= require ("Socket.io");
var server = Http.createserver (function (request, response) {
response.writehead (200,{"Content-type": "Text/html" });
Response.Write ("WebSocket start~~~~~~~~~~~~");
Response.End ("");
}). Listen (8000);
var socket= io.listen (server);
Add a connection Listener
Socket.on ("Connection", function (client) {
Client.on ("message", function (event) {
Console.log ("Received Message from client!", event);
});
Client.on ("Disconnect", function () {
clearinterval (interval);
Console.log ("Server has disconnected");
});
});Data sent two ways send and emit
You can send data using both send and emit, but emit can customize events as follows:
Emit
Server
Socket.on ("Connection", function (client) {
Client.on ("Message", function (event) {
Client.emit ("Emitmessage", {hello: "Messgge received, wish you Happy" +new Date (). toString ());
});
});
Client
Socket.on ("Emitmessage", function (data) {
document.getElementById ("Result"). Innerhtml+=data.hello + "<br/>";
});
Send
Server
Socket.on ("Connection", function (client) {
Client.send ("Hello, I am the server");
});
Client
Socket.on ("Message", function (data) {
document.getElementById ("Result"). Innerhtml+=data + "<br/>";
});
Example: (Socket.io)
Client:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>insert title here</title>
<style>
div{
border-radius:10px;
BORDER:2PX solid Pink;
width:800px;
}
</style>
<body>
<div id= "Result" ></div>
<script src= "Http://localhost:8000/socket.io/socket.io.js" ></script>
<script>
Create a Socket.io instance, establish a connection
var socket = Io.connect ("http://localhost:8000");
Add a connection Listener
Socket.on ("Connect", function () {
Console.log ("Client has connected to the server!");
});
Add a connection Listener
Socket.on ("Message", function (data) {
document.getElementById ("Result"). Innerhtml+=data + "<br/>";
});
Socket.on ("Emitmessage", function (data) {
document.getElementById ("Result"). Innerhtml+=data.hello + "<br/>";
});
Add a listener that closes the connection
Socket.on ("Disconnect", function () {
Console.log ("The client has disconnected!");
});
Send a message to the server via the socket
function sendmessagetoserver (message) {
Socket.send (message);
}
var date = new Date ();
var ms= "Time:" +date.tostring () + "are a nice day, wish to you Happy";
SetInterval ("Sendmessagetoserver (ms)", 1000);
</script>
</body>
Server:
var http = require ("http");
var io= require ("Socket.io");
var server = Http.createserver (function (request, response) {
Response.writehead (200,{"Content-type": "Text/html"});
Response.Write ("WebSocket start~~~~~~~~~~~~");
Response.End ("");
}). Listen (8000);
var socket= io.listen (server);
Add a connection Listener
Socket.on ("Connection", function (client) {
Client.on ("Message", function (event) {
Console.log ("Received Message from client!", event);
Client.emit ("Emitmessage", {hello: "Messgge received, wish you Happy" +new Date (). toString ());
});
Client.on ("Disconnect", function () {
Clearinterval (interval);
Console.log ("Server has disconnected");
});
Client.send ("Hello, I am the server");
});
Results:
Client:
Server side:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
