what is websockets

Two-way communication over ont TCP socket, a type of PUSH technology

　　HTML5的新特性，用于双向推送消息（例如网页聊天，手机推送消息等）

　　原理：

  1. client利用regular http请求webpage
  2. 请求的webpage 执行javascript脚本,open a connection to server.

  3. 有新的信息时服务器和客户端可以相互发送信息（Real-time traffic from the server to the client and from the client to the server

　　

客户端

　　说明：

　　readyState：

CONNECTING (0)：表示还没建立连接；
OPEN (1)： 已经建立连接，可以进行通讯；
CLOSING (2)：通过关闭握手，正在关闭连接；
CLOSED (3)：连接已经关闭或无法打开；

　　

　　url： WebSocket 服务器的网络地址，协议通常是”ws”或“wss(加密通信)”,

　　事件：

  • send：向服务器端发送数据
  • close 方法就是关闭连接；
  • onopen连接建立，即握手成功触发的事件；
  • onmessage收到服务器消息时触发的事件；
  • onerror异常触发的事件；

　

　 使用例子：

// 创建一个Socket实例

var socket = new WebSocket('ws://localhost:8080'); 

// 打开Socket

socket.onopen = function(event) { 

  // 发送一个初始化消息

  socket.send('I am the client and I\'m listening!'); 

  // 监听消息

  socket.onmessage = function(event) {

    console.log('Client received a message',event);

  }; 

  // 监听Socket的关闭

  socket.onclose = function(event) {

    console.log('Client notified socket has closed',event);

  }; 

  // 关闭Socket....

  //socket.close()

};

服务器端

　jWebSocket (Java)
　web-socket-ruby (ruby)
　Socket IO-node (node.js)

　下面以socket.io说明，环境说明：（node.js安装见 http://www.cnblogs.com/wishyouhappy/p/3647037.html）

　1. 安装socket.io

　npm install -g socket.io

2.使用require引入http和socket.io

var http = require("http");

var io= require('socket.io');

3.创建server

var server = http.createServer(function(request, response){

    response.writeHead(200,{"Content-Type":"text/html"});

    response.write("WebSocket Start~~~~~~~~~~~~");

    response.end("");

}).listen(8000);

4.监听

var socket= io.listen(server);

5.例子：

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); 

// 添加一个连接监听器

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');

  });

});

数据发送两种方式send和emit

使用send和emit都可以发送数据，但是emit可以自定义事件，如下：

emit：

//服务器

socket.on('connection', function(client){

  client.on('message',function(event){

    client.emit('emitMessage', { hello: 'messgge received, wish you happy'+new Date().toString() });

  }); 

});

//客户端

socket.on('emitMessage',function(data) {

  document.getElementById("result").innerHTML+=data.hello + "<br />";

});

send：

//服务器

socket.on('connection', function(client){

  client.send('hello, I am the server');

});

//客户端

socket.on('message',function(data) {

  document.getElementById("result").innerHTML+=data + "<br />";

});

实例：（socket.io）

客户端：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

div{

    border-radius: 10px;

    border: 2px solid pink;

    width:800px;

}

</style>

</head>

<body>

<h1></h1>

<div id="result"></div>

<script src="http://localhost:8000/socket.io/socket.io.js"></script>

<script>

//创建Socket.IO实例，建立连接

var socket = io.connect('http://localhost:8000');

// 添加一个连接监听器

socket.on('connect',function() {

  console.log('Client has connected to the server!');

});

// 添加一个连接监听器

socket.on('message',function(data) {

  document.getElementById("result").innerHTML+=data + "<br />";

});

socket.on('emitMessage',function(data) {

  document.getElementById("result").innerHTML+=data.hello + "<br />";

});

// 添加一个关闭连接的监听器

socket.on('disconnect',function() {

  console.log('The client has disconnected!');

}); 

// 通过Socket发送一条消息到服务器

function sendMessageToServer(message) {

  socket.send(message);

}

var date = new Date();

var ms="Time: "+date.toString()+"Today is a nice day, wish you happy";

setInterval("sendMessageToServer(ms)",1000);

</script>

</body>

</html>

服务器：

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); 

// 添加一个连接监听器

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');

});

结果：

客户端：

服务器端：

相关博文：SSE及相关技术（web sockets, long polling等）

HTML5 Web socket和socket.io的更多相关文章

  1. Demo源码放送：打通B/S与C/S ！让HTML5 WebSocket与.NET Socket公用同一个服务端！

    随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...

  2. 打通B/S与C/S ！让HTML5 WebSocket与.NET Socket公用同一个服务端！

    随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...

  3. Python（七）Socket编程、IO多路复用、SocketServer

    本章内容: Socket IO多路复用(select) SocketServer 模块(ThreadingTCPServer源码剖析) Socket socket通常也称作"套接字" ...

  4. Java socket中关闭IO流后，发生什么事？（以关闭输出流为例）

    声明:该博文以socket中,关闭输出流为例进行说明. 为了方便讲解,我们把DataOutputstream dout = new DataOutputStream(new BufferedOutpu ...

  5. How To: Perl TCP / UDP Socket Programming using IO::Socket::INET

    http://www.thegeekstuff.com/2010/07/perl-tcp-udp-socket-programming/ In this article, let us discuss ...

  6. 搭建简易的WebServer(基于pyhton实现简易Web框架 使用socket套接字)

    1. 使用web底层socket的方式实现简易服务器的搭建,用来理解学习 # 1.导入socket模块 import socket import re import gevent import sys ...

  7. Python socket编程之IO模型介绍（多路复用*）

    1.I/O基础知识 1.1 什么是文件描述符? 在网络中,一个socket对象就是1个文件描述符,在文件中,1个文件句柄(即file对象)就是1个文件描述符.其实可以理解为就是一个“指针”或“句柄”, ...

  8. Socket网络编程-IO各种概念及多路复用

    Socket网络编程-IO各种概念及多路复用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.操作系统相关知识 1>.同步和异步  函数或方法被调用的时候,调用者是否得到最 ...

  9. web框架之socket

    概述 套接字最初是为同一主机上的应用程序所创建,使得主机上运行的一个程序(又名一个进程)与另一个运行的程序进行通信.这就是所谓的进程间通信 ( Inter Process Communication, ...

  10. Android—Socket中关闭IO流后导致Socket关闭不能再收发数据的解决办法

    以Socket发送数据为例: 发送数据时候要声明:DataOutputStream os = new DataOutputStream(socket.getOutputStream()); 最近开发遇 ...

随机推荐

  1. [转] Linux TCP/IP网络小课堂：net-tools与iproute2大比较

    PS:netstat选项是-planet,方便记忆 http://os.51cto.com/art/201409/450886.htm 如今许多系统管理员仍结合使用ifconfig.route.arp ...

  2. Android内存等信息

    1. Linux中proc目录下文件详解 http://wenku.baidu.com/view/2ce89f00a6c30c2259019ef1.html 2. Android系统/proc目录详解 ...

  3. Java基础知识强化之IO流笔记21：FileInputStream读取数据

    1. 字节输入流的操作步骤: (1)创建字节输入流的对象 (2)调用read()方法读取数据,并把数据显示到控制台 (3)关闭字节输入流的对象资源 2. FileInputStream构造: File ...

  4. ButterKnife 注解

    简介 官网:http://jakewharton.github.io/butterknife/ github:https://github.com/JakeWharton/butterknife 依赖 ...

  5. android背景平铺方式 tileMode

    创建重复的背景图片  在drawable目录下创建一个repeat_bg.xml:    然后在布局的xml文件中可以这样引用:    ================================ ...

  6. jQueryUI 日期控件

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Inse ...

  7. MVC3中 ViewBag、ViewData和TempData的使用和区别（不是自己写的）

    (网上抄的,并未消化)在MVC3开始,视图数据可以通过ViewBag属性访问,在MVC2中则是使用ViewData.MVC3中保留了ViewData的使用.ViewBag 是动态类型(dynamic) ...

  8. leetcode修炼之路——13. Roman to Integer

    题目: Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from ...

  9. jrae源码解析(一）

    jare用java实现了论文<Semi-Supervised Recursive Autoencoders for Predicting Sentiment Distributions>中 ...

  10. AutoLayout(转)

    转自    http://blog.sina.com.cn/s/blog_9564cb6e0101wv9o.html controller和View的责任分配: 1.View指定固有的content  ...