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. Java基础知识强化之集合框架笔记06：Collection集合存储自定义对象并遍历的案例

    1.练习:用集合存储5个学生对象,并把学生对象进行遍历. 分析: (1)创建学生类(2)创建集合对象(3)创建学生对象(4)把学生添加到集合(5)把集合转成数组(6)遍历数组 2. 代码示例: Stu ...

  2. ERROR 1372 (HY000): Password hash should be a 41-digit hexadecimal number；

    rpm 安装了 mysql 5.6 的版本 遇到的问题 1. 提示与5.1版本的有冲突. 解决方式, 是 rpm --force -ivh rpm包.rpm 进行强制安装 2. 启动 mysql 后, ...

  3. android中获取时间

    android中获取时间 1)通过calendar类获取 Calendar calendar = Calendar.getInstance();int moth = calendar.get(Cale ...

  4. dede当前位置各种写法

    方法一.Dedecms当前位置{dede:field name='position'/} 方法二.dede:field name='position' runphp='yes'}          $ ...

  5. http方法

    http method(方法):1.get 从服务器获取资源2.post 向服务器发送资源3.put 向服务器推送资源4.delete 告诉服务器删除某个资源5.head 告诉服务器返回数据时不需要返 ...

  6. 访问的是A网址，但是跳转B网址的内容，地址栏还是A网址

    最近家里宽带续费,是用小区小广告的宽带,打开http://download.csdn.net/ 或其他一些设计下载.购物商城或威客网址进不去 提示 经过网上大量搜索和请教,都说是以下几点引起的 1.网 ...

  7. （转载）小课堂UI-Star Diamond Tutorial

  8. tomcat启动报错：Neither the JAVA_HOME nor the JRE_HOME environment variable is defined At least one of these environment variable

    linux 下 启动tomcat 报: Neither the JAVA_HOME nor the JRE_HOME environment variable is definedAt least o ...

  9. Python datetime time 常用操作

    测试版本: Python 2.7 获取当前时间的两种方法 import datetime,time now = time.strftime("%Y-%m-%d %H:%M:%S") ...

  10. 《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。

    在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang=&q ...