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实现无刷新DropDownList联动实现代码
Mar 08 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
js对象的复制继承实例
Jan 10 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 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实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
Python中单、双下划线的区别总结
2017/12/01 Python
python实现弹跳小球
2019/05/13 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
Django xadmin安装及使用详解
2020/10/26 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
康拓普公司Java笔面试
2016/09/23 面试题
软件工程师面试题
2012/06/25 面试题
中学校庆方案
2014/03/17 职场文书
企业催款函范本
2015/06/24 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL