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 事件执行检测代码
Dec 09 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
javascript常用函数(2)
Nov 05 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
JavaScript实现省份城市的三级联动
Feb 11 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实现检查文章是否被百度收录
2015/01/27 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python str与repr的区别
2013/03/23 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
承诺书格式
2014/06/03 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
歌剧魅影观后感
2015/06/05 职场文书
小平小道观后感
2015/06/09 职场文书
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server
使用scrapy实现增量式爬取方式
2022/06/21 Python