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 相关文章推荐
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
Array.prototype.slice 使用扩展
Jun 09 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
Angular5.1新功能分享
Dec 21 Javascript
小程序开发之模态框组件封装
Apr 23 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
php删除数组元素示例分享
2014/02/17 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
详解用vue编写弹出框组件
2017/07/04 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
python中正则表达式的使用详解
2014/10/17 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
公务员年度考核个人总结
2015/02/12 职场文书
教学质量月活动总结
2015/05/11 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript