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. 从 ReactiveCocoa 中能学到什么？不用此库也能学以致用

    从知道ReactiveCocoa开始就发现对这个库有不同的声音,上次参加<T>技术沙龙时唐巧对在项目中已全面使用FRP的代码家提出为什么这种编程模型出现了这么长时间怎么像ReactiveC ...

  2. iOS 启动连续闪退保护方案

    引言 “如果某个实体表现出以下任何一种特性,它就具备自主性:自我修复.自我保护.自我维护.对目标的自我控制.自我改进.” —— 凯文·凯利 iOS App 有时可能遇到启动必 crash 的绝境:每次 ...

  3. python文件处理--笔记

    之前一段时间一直在忙着写毕业论文,盲评搞得人心惶惶,以致于都没有看书,最近需要补上前面落下的东西. <Python3程序开发指南> 1.二进制数据的读写 二进制格式通常是占据磁盘空间最小. ...

  4. Python之路,Day18 - 开发一个WEB聊天来撩妹吧

    Python之路,Day18 - 开发一个WEB聊天来撩妹吧   本节内容: 项目实战:开发一个WEB聊天室 功能需求: 用户可以与好友一对一聊天 可以搜索.添加某人为好友 用户可以搜索和添加群 每个 ...

  5. VB 生成xml文件 并使用xsd验证

    最近客户的一个需要,要求将数据以xml的形式发送. vb 实现代码 Private Function createXML_old(ByVal xmlName As String) As Boolean ...

  6. WIN10FTP服务器搭建

    在WIN10上搭建FTP服务器 先建立两个文件夹,区分上传和下载,做测试 用 然后在管理--服务界面新建一个用户 用户目录下创建一个用户 因为服务应用程序里面没有IIS,所以我们打开控制面板里面的程序 ...

  7. Android比较实用的属性

    ImageView //设置图片填充整个背景 android:scaleType="fitXY"

  8. 各版本 linux(转)

    Linux各种版本下载 ftp://ftp.linuxforum.net/ISO/Redhat7.3/valhalla-i386-disc1.iso ftp://ftp.linuxforum.net/ ...

  9. SQL后台分页三种方案和分析

    建立表:CREATE TABLE [TestTable] ( [ID] [int] IDENTITY (1, 1) NOT NULL , [FirstName] [nvarchar] (100) CO ...

  10. uvalive 5721 Activation （概率dp+方程）

    题目链接:http://vjudge.net/problem/viewProblem.action?id=24999 主要思想就是解方程的思想. 二维dp应该很容易想到,就是当前位置加队伍长度. dp ...