socket.io学习教程之基本应用(二)


Posted in Javascript onApril 29, 2017

前言

Socket.IO支持及时、双向与基于事件的交流。它可以在每个平台、每个浏览器和每个设备上工作,可靠性和速度同样稳定。

  • 实时分析:将数据推送到客户端,这些客户端会被表示为实时计数器,图表或日志客户。
  • 实时通信和聊天:只需几行代码便可写成一个Socket.IO的”Hello,World”聊天应用。
  • 二进制流传输:从1.0版本开始,Socket.IO支持任何形式的二进制文件传输,例如:图片,视频,音频等。
  • 文档合并:允许多个用户同时编辑一个文档,并且能够看到每个用户做出的修改。

服务端与客户端连接

socket.io同时提供了服务端和客户端的API

服务端socket.io必须绑定一个http.Server实例

绑定http.Server

1、隐式绑定

通过实例化时传入端口或实例化后调用listen或attach函数进行隐式绑定。socket.io内部实例化并监听http.Server

实例化时传入端口

let io = require('socket.io')(3000)

直接通过listen或attach函数绑定。listen与attach同义

let io = require('socket.io') 
io.listen(3000) // io.attach(3000)

2、显示绑定

可以手动指定http.Server

实例化时绑定

let server = require('http').Server(); 
let io = require('socket.io')(server)

server.listen(3000)

通过listen或attach绑定

let server = require('http').Server(); 
let io = require('socket.io')()

io.listen(server) // io.attach(server)

server.listen(3000)

可以绑定express或koa等http框架

express

let app = require('express') 
let server = require('http').Server(app) 
let io = require('socket.io')(server)

app.listen(3000)

koa

let app = require('koa')() 
let server = require('http').Server(app.callback())

let io = require('socket.io')(server)

app.listen(3000)

监听连接状态

当服务器端与客户端连接成功时,服务端会监听到connection和connect事件(connection与connect同义), 客户端会监听到connect事件, 断开连接时服务端的对应到客户端的socket与客户端均会均会监听到disconnect事件

服务端代码

let server = require('http').Server() 
let io = require('socket.io')(server)

server.listen(3000); 
io.on('connection', socket => { 
 console.log('connect')
 socket.on('disconnect', () => {
 console.log('disconnect')
 })
 socket.disconnect()
})

运行后打印

connect 
disconnect

客户端代码

let socket = io('http://localhost:3000') 
socket.on('connect', () => { 
 console.log('connect')
})
socket.on('disconnect', () => { 
 console.log('disconnect')
})

运行后打印

connect 
disconnect

传输数据

服务器与客户端的socket是一个关联的EventEmitter对象,客户端socket派发的事件可以通以被服务端的socket接收,服务器端socket派发的事件也可以被客户端接受。基于这种机制,可以实现双向交流。

现在模拟这样一种情况:客户端不停发送随机数,当随机数大于0.95时,服务端延时1s后向客户端发送警告以及警告次数

服务端代码

let server = require('http').Server() 
let io = require('socket.io')(server)

server.listen(3000); 
io.on('connection', socket => { 
 socket.on('random', value => {
 console.log(value)
 if (value > 0.95) {
  if (typeof socket.warning === 'undefined') socket.warning = 0
  setTimeout(() => {
  socket.emit('warn', ++socket.warning)
  }, 1000)
 }
 })
})

socket对象可以用来存储状态信息和自定义数据,如socket.warning

客户端代码

let socket = io('http://localhost:3000') 
let interval = setInterval(() => { 
 socket.emit('random', Math.random())
}, 500)
socket.on('warn', count => { 
 console.log('warning count: ' + count)
})
socket.on('disconnect', () => { 
 clearInterval(interval)
})

传输流

socket.io可以处理流

服务端代码

io.on('connection', function (socket) { 
 let stream = ss.createStream()
 ss(socket).emit('script', stream)
 fs.createReadStream(__filename).pipe(stream)
})

客户端代码

let socket = io('http://localhost:3000') 
ss(socket).on('script', stream => { 
 let buffer = '' 
 stream.on('data', data => {
 buffer += data.toString()
 })
 stream.on('end', () => {
 console.log(buffer)
 })
})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
vue实现树形菜单效果
Mar 19 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 #Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 #Javascript
Vue.js在使用中的一些注意知识点
Apr 29 #Javascript
jQuery实现按比例缩放图片的方法
Apr 29 #jQuery
Vue开发中整合axios的文件整理
Apr 29 #Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 #Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 #jQuery
You might like
Email+URL的判断和自动转换函数
2006/10/09 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
python制作企业邮箱的爆破脚本
2016/10/05 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
洗发露广告词
2014/03/14 职场文书
有趣的广告词
2014/03/18 职场文书
服务之星事迹材料
2014/05/03 职场文书
电子专业自荐信
2014/07/01 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
python如何获取网络数据
2021/04/11 Python
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL