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. STL——静态常量整数成员在class内部直接初始化

    如果class内含const static integral data member,那么根据C++标志规格,我们可以在class之内直接给予初值.所谓integral泛指所有的整数型别(包括浮点数) ...

  2. python栈的实现（入栈，出栈）

    #coding=utf-8 class Stack(): def __init__(st,size):#栈的初始化 st.stack=[]; st.size=size; st.top=-1 def p ...

  3. 配置Statspack

    配置Statspack 配置前需要了解3个内容. 1.创建Statspack模式使用的密码. 2.Statspack使用的默认表空间. 3.Statspack使用的临时表空间. Create Tabl ...

  4. 156 Useful Run Commands

    To Access… Run Command Accessibility Controls access.cpl Accessibility Wizard accwiz Add Hardware Wi ...

  5. iOS开发UI篇——简单的浏览器查看程序

    一.程序实现要求 1.要求 2. 界面分析 (1) 需要读取或修改属性的控件需要设置属性 序号标签 图片 图片描述 左边按钮 右边按钮 (2) 需要监听响应事件的对象,需要添加监听方法 左边按钮 右边 ...

  6. centos U盘安装

    1.版本 LiveCD 和 LiveDVD 是可以直接进入运行系统,类似win PE, 进入系统后有一个图标 install - HHD(从硬盘安装). netinstall 是用于网络安装和系统救援 ...

  7. 数据类型的转换String

    x.toString(): 无法转换null和undefined 不过String()却是万能的,其中的原理如下 function String(x){ if(x===undefined){ retu ...

  8. java_reflect_02

    按我们所知道的.对于类中的method,constructor,field如果访问属性是private的情况下我们是访问不了的,但通过反射就可以做到 仔细分析api发现Method,Construct ...

  9. 九度OJ 1025 最大报销额(01背包）

    题目1025:最大报销额 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2683 解决:608 题目描述: 现有一笔经费可以报销一定额度的发票.允许报销的发票类型包括买图书(A类).文具( ...

  10. Json处理函数json_encode json_decode

    json_decode — 对 JSON 格式的字符串进行编码 mixed json_decode ( string $json [, bool $assoc = false [, int $dept ...