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 相关文章推荐
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
JavaScript获取路径设计源码
May 22 Javascript
给js文件传参数(详解)
Jul 13 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
es6函数之尾递归用法实例分析
Apr 25 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
vue学习笔记之指令v-text && v-html && v-bind详解
2017/05/12 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
Python标准库内置函数complex介绍
2014/11/25 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
python实现画一颗树和一片森林
2018/06/25 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
Python实现ATM系统
2020/02/17 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
影视艺术学院毕业生自荐信
2013/11/13 职场文书
总经理驾驶员岗位职责
2013/12/04 职场文书
企业年会主持词
2014/03/27 职场文书
培训讲师岗位职责
2014/04/13 职场文书
党员服务承诺书
2014/05/28 职场文书
安全责任书范文
2014/08/25 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
小学语文国培研修日志
2015/11/13 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书