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. [Angular 2] Pipe Purity

    Explaining how Pipes only change by default when your Pipe input parameters change and not when your ...

  2. SmartFoxServer 2x的pythonclient

    最近的研究SmartFoxServer 2x.这是一个对网络游戏的Web开发框架.服务器基于java netty为发展框架,client支持flash,unity, ios, android(java ...

  3. C++面试中string类的一种正确写法

    C++ 的一个常见面试题是让你实现一个 String 类,限于时间,不可能要求具备 std::string 的功能,但至少要求能正确管理资源.具体来说: 能像 int 类型那样定义变量,并且支持赋值. ...

  4. Codeforces Round #291 (Div. 2) C - Watto and Mechanism 字符串

    [题意]给n个字符串组成的集合,然后有m个询问(0 ≤ n ≤ 3·105, 0 ≤ m ≤ 3·105) ,每个询问都给出一个字符串s,问集合中是否存在一个字符串t,使得s和t长度相同,并且仅有一个 ...

  5. python瓦登尔湖词频统计

    #瓦登尔湖词频统计: import string path = 'D:/python3/Walden.txt' with open(path,'r',encoding= 'utf-8') as tex ...

  6. 2015 Multi-University Training Contest 1 题解 BY FZUw

    题目链接:5288-5299 HDU5288 题解原文链接:我是链接

  7. iOS程序的完整启动过程（有storyboard）

    1.先执行main函数,main内部会调用UIApplicationMain函数 2.UIApplicationMain函数里面做了什么事情:1> 创建UIApplication对象 2> ...

  8. mybatis 一对一关联

    首先建表: CREATE TABLE teacher( t_id INT PRIMARY KEY AUTO_INCREMENT, t_name VARCHAR(20) ); CREATE TABLE ...

  9. svn更新

    下载配置文件 pwd cd /home/www/xxxx/protected/config/ get main.php 上传配置文件 put main.php svn更新 svn co svn://s ...

  10. VBox UUID already exists 问题处理

    问题说明: 在win7系统下使用vbox时,有时候需要多台相同操作系统和开发环境的虚拟电脑时,如果重复安装,会比较麻烦.那么可以在vbox中创建一个新的虚拟电脑B,但不创建虚拟硬盘,然后拷贝虚拟电脑A ...