Socket.io详解
socket.io是一个跨浏览器支持WebSocket的实时通讯的JS。
由于HTTP是无状态的协议,要实现即时通讯非常困难。因为当对方发送一条消息时,服务器并不知道当前有哪些用户等着接收消息,当前实现即时通讯功能最为普遍的方式就是轮询机制。即客户端定期发起一个请求,看看有没有人发送消息到服务器,如果有服务端就将消息发给客户端。这种做法的缺点显而易见,那么多的请求将消耗大量资源,大量的请求其实是浪费的。
现在,我们有了WebSocket,它是HTML5的新API。WebSocket连接本质上就是建立一个TCP连接,WebSocket会通过HTTP请求建立,建立后的WebSocket会在客户端和服务端建立一个持久的连接,直到有一方主动关闭该连接。所以,现在服务器就知道有哪些用户正在连接了,这样通讯就变得相对容易了。
Socket.io支持及时、双向、基于事件的交流,可在不同平台、浏览器、设备上工作,可靠性和速度稳定。最典型的应用场景如:
- 实时分析:将数据推送到客户端,客户端表现为实时计数器、图表、日志客户。
- 实时通讯:聊天应用
- 二进制流传输:socket.io支持任何形式的二进制文件传输,例如图片、视频、音频等。
- 文档合并:允许多个用户同时编辑一个文档,并能够看到每个用户做出的修改。
Socket.io实际上是WebSocket的父集,Socket.io封装了WebSocket和轮询等方法,会根据情况选择方法来进行通讯。
Node.js提供了高效的服务端运行环境,但由于Browser对HTML5的支持不一,为了兼容所有浏览器,提供实时的用户体验,并为开发者提供客户端与服务端一致的编程体验,于是Socket.io诞生了。
npm安装socket.op
npm install --save socket.io
Socket.io将WebSocket和Polling机制以及其它的实时通信方式封装成通用的接口,并在服务端实现了这些实时机制相应代码。这就是说,WebSocket仅仅是Socket.io实现实时通信的一个子集,那么Socket.io都实现了Polling中那些通信机制呢?
- Adobe Flash Socket
大部分PC浏览器都支持的Socket模式,不过是通过第三方嵌入到浏览器,不在W3C规范内,可能将逐步被淘汰。况且,大部分手机浏览器并不支持此种模式。 - AJAX Long Polling
定时向服务端发送请求,缺点是给服务端带来压力并出现信息更新不及时的现象。 - AJAX multipart streaming
在XMLHttpRequest对象上使用某些浏览器支持的multi-part标志,AJAX请求被发送给服务端并保持打开状态(挂起状态),每次需要向客户端发送信息,就寻找一个挂起的HTTP请求响应给客户端,并且所有的响应都会通过统一连接来写入。 - Forever Iframem
永存的Iframe设计了一个置于页面中隐藏的iframe标签,该标签的src属性指向返回服务端时间的Servlet路径。每次在事件到达时,Servlet写入并刷新一个新的Script标签,该标签内部带有JS代码,iframe的内容被附加上script标签,标签中的内容就会得到执行。这种方式的缺点是接收数据都是由浏览器通过HTML标签来处理的,因此无法知道连接何时在哪一端被断开,而且iframe标签在浏览器中将被逐步取消。 - JSONP Polling
JSONP轮询基本与HTTP轮询一样,不同之处则是JSONP可发出跨域请求。
Socket.io 基本应用
socket.io提供了基于事件的实时双向通讯,它同时提供了服务端和客户端的API。
服务端
服务端socket.io必须绑定一个http.Server
实例,因为WebSocket协议是构建在HTTP协议之上的,所以在创建WebSocket服务时需调用HTTP模块并调用其下createServer()
方法,将生成的server作为参数传入socket.io。
var httpServer = require('http').createServer();
var io = require('socket.io')(httpServer);
httpServer.listen(3000);
绑定http.Server
可使用隐式绑定和显式绑定
- 隐式绑定
socket.io内部实例化并监听http.Server
,通过实例化时传入端口或者在实例化后调用listen
或attach
函数进行隐式绑定。
// 实例化时传入端口
require('socket.io')(3000) // 通过listen或attach函数绑定
let io = require('socket.io')
io.listen(3000);
// io.attach(3000);
- 显式绑定
// 实例化时绑定
let httpServer = require('http').Server();
let io = require('socket.io')(httpServer);
httpServer.listen(3000); //通过listen或attach绑定
let httpServer = require('http').Server();
let io = require('socket.io')();
io.listen(httpServer);
// io.attach(httpServer);
httpServer.listen(3000);
Express框架中使用
let app = require('express'); let httpServer= require('http').Server(app);
let io = require('socket.io')(httpServer); app.listen(3000);
KOA框架中使用
let app = require('koa')(); let httpServer = require('http').Server(app.callback());
let io = require('socket.io')(httpServer); app.listen(3000);
建立连接
当服务端和客户端连接成功时,服务端会监听到connection
和connect
事件,客户端会监听到connect
事件,断开连接时服务端对应到客户端的socket与客户端均会监听到disconcect
事件。
/*客户端*/
<script src="http://cdn.socket.io/stable/socket.io.js"></script>
<script>
// socket.io引入成功后,可通过io()生成客户端所需的socket对象。
let socket = io('http://127.0.0.0:3000'); // socket.emmit()用户客户端向服务端发送消息,服务端与之对应的是socket.on()来接收信息。
socket.emmit('client message', {msg:'hi, server'}); // socket.on()用于接收服务端发来的消息
socket.on('connect', ()=>{
console.log('client connect server');
});
socket.on('disconnect', ()=>{
console.log('client disconnect');
});
</script> /*服务端*/
// 服务端绑定HTTP服务器实例
let httpServer = require('http').Server();
let io = require('socket.io')(httpServer);
httpServer.listen(3000); // 服务端监听连接状态:io的connection事件表示客户端与服务端成功建立连接,它接收一个回调函数,回调函数会接收一个socket参数。
io.on('connection', (socket)=>{
console.log('client connect server, ok!'); // io.emit()方法用于向服务端发送消息,参数1表示自定义的数据名,参数2表示需要配合事件传入的参数
io.emmit('server message', {msg:'client connect server success'}); // socket.broadcast.emmit()表示向除了自己以外的客户端发送消息
socket.broadcast.emmit('server message', {msg:'broadcast'}); // 监听断开连接状态:socket的disconnect事件表示客户端与服务端断开连接
socket.on('disconnect', ()=>{
console.log('connect disconnect');
}); // 与客户端对应的接收指定的消息
socket.on('client message', (data)=>{
cosnole.log(data);// hi server
}); socket.disconnect();
});
传输数据
服务端和客户端的socket是一个关联的EventEmitter
对象,客户端socket派发的事件可以通过被服务端的socket接收,服务端socket派发的事件也可以被客户端接收。基于这种机制,可以实现双向交流。
# 模拟:客户端不断发送随机数,当随机数大于0.95时,服务端延迟1s后向客户端发送警告以及警告次数。
/*客户端*/
<script src="http://cdn.socket.io/stable/socket.io.js"></script>
<script>
let socket = io('http://127.0.0.1:3000'); let interval = setTimeInterval(()=>{
socket.emit('random', Math.random());
}, 500); socket.on('warn', count=>{
console.log('warning count : '+count);
}); socket.on('disconnect', ()=>{
clearInterval(interval);
});
</script> /*服务端*/
let httpServer = require('http').Server();
let io = require('socket.io')(httpServer);
httpServer.listen(3000); io.on('connection', socket=>{
socket.on('random', value=>{
console.log(value);
if(value>0.95){
if(typeof socket.warnign==='undefined'){
socket.warning = 0;// socket对象可用来存储状态和自定义数据
}
setTimeout(()=>{
socket.emit('warn', ++socket.warning);
}, 1000);
}
});
});
Socket.io详解的更多相关文章
- Linux的SOCKET编程详解(转)
Linux的SOCKET编程详解 1. 网络中进程之间如何通信 进 程通信的概念最初来源于单机系统.由于每个进程都在自己的地址范围内运行,为保证两个相互通信的进 程之间既互不干扰又协调一致工作,操作系 ...
- 【ARM-Linux开发】Linux的SOCKET编程详解
Linux的SOCKET编程详解 1. 网络中进程之间如何通信 进 程通信的概念最初来源于单机系统.由于每个进程都在自己的地址范围内运行,为保证两个相互通信的进 程之间既互不干扰又协调一致工作,操作系 ...
- Socket 死连接详解
Socket 死连接详解 当使用 Socket 进行通信时,由于各种不同的因素,都有可能导致死连接停留在服务器端,假如服务端需要处理的连接较多,就有可能造成服务器资源严重浪费,对此,本文将阐述其原理以 ...
- socket原理详解
1.什么是socket 我们知道进程通信的方法有管道.命名管道.信号.消息队列.共享内存.信号量,这些方法都要求通信的两个进程位于同一个主机.但是如果通信双方不在同一个主机又该如何进行通信呢?在计算机 ...
- windows socket函数详解
windows socket函数详解 近期一直用第三方库写网络编程,反倒是遗忘了网络编程最底层的知识.因而产生了整理Winsock函数库的想法.以下知识点均来源于MSDN,本人只做翻译工作.虽然很多前 ...
- Android Socket通信详解
一.Socket通信简介 Android与服务器的通信方式主要有两种,一是Http通信,一是Socket通信.两者的最大差异在于,http连接使用的是“请求—响应方式”,即在请求时建立连接通道,当客 ...
- Java IO 详解
Java IO 详解 初学java,一直搞不懂java里面的io关系,在网上找了很多大多都是给个结构图草草描述也看的不是很懂.而且没有结合到java7 的最新技术,所以自己来整理一下,有错的话请指正, ...
- socket接口详解
1. socket概述 socket是在应用层和传输层之间的一个抽象层,它把TCP/IP层复杂的操作抽象为几个简单的接口供应用层调用已实现进程在网络中通信. socket起源于UNIX,在Unix一切 ...
- c/c++ socket函数详解
c/c++ socket函数详解 注意: 使用socketAPI前,要先将相关链接库(Ws2_32.lib)加入链接,并使用WSAStartUp函数初始化.每个socket函数都可能失败(返回-1), ...
随机推荐
- 禅道的bug提交
- day6(短信验证接口)
1.注册容联云账号 1.1注册账号 https://www.yuntongxun.com/user/login 1.2登录即可看到开发者账号信息 1.3 添加测试账号 2.使用容联云发送代码测试 ' ...
- 后端程序员必备的 Linux 基础知识
1. 从认识操作系统开始 正式开始 Linux 之前,简单花一点点篇幅科普一下操作系统相关的内容. 1.1. 操作系统简介 我通过以下四点介绍什么是操作系统: 操作系统(Operating Syste ...
- 第5.2节 Python的函数参数收集
函数的参数使用除了常规的位置参数和关键字参数外,还支持可变个数的函数参数,这种支持可变个数的参数方法称为参数收集,对应的参数称为收集参数. 一.参数收集的定义 Python的函数支持可变不定数量的参数 ...
- PyQt(Python+Qt)学习随笔:部件拉伸策略sizePolicy优先级
部件的尺寸调整策略或拉伸策略sizePolicy有7个值,如果同一个布局中的不同部件设置了不同的拉伸策略策略,在整个布局空间拉伸时,它们会怎么进行拉伸处理呢? 在未设置拉伸因子的情况下,Qt中这些拉伸 ...
- anaconda 配置虚拟环境
工作时有时候会遇到不同版本的问题,比如深度学习tensorflow 1.14版本 和 2.0版本,或者cpu版本和gpu版本,那么这个时候建立虚拟环境就很方便了 anaconda命令行下 1) act ...
- nodjs html 转 pdf
var fs = require('fs');var pdf = require('html-pdf');//模块//读取html 文件 var html = fs.readFileSync('./s ...
- HashMap相关类:Hashtable、LinkHashMap、TreeMap
前言 很高兴遇见你~ 在 深入剖析HashMap 文章中我从散列表的角度解析了HashMap,在 深入解析ConcurrentHashMap:感受并发编程智慧 解析了ConcurrentHashMap ...
- C++异常之三 异常处理接口声明
异常处理接口声明 1 一般为了方便程序员阅读代码,提高程序的可读性,会将函数中的异常类型声明至函数头后方,不用一行一行的找抛出内容: 2 这里要注意一点,这属于C++的标准语法,但在VS中这个操作不被 ...
- 使用spark将内存中的数据写入到hive表中
使用spark将内存中的数据写入到hive表中 hive-site.xml <?xml version="1.0" encoding="UTF-8" st ...