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 相关文章推荐
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
div模拟选择框示例代码
Nov 03 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 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&&mysql)一
2006/10/09 PHP
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
php中的strpos使用示例
2014/02/27 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
用一段js程序来实现动画功能
2007/03/06 Javascript
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
浅谈python import引入不同路径下的模块
2017/07/11 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
软件工程师面试题
2012/06/25 面试题
退税申请报告怎么写
2015/05/18 职场文书
民事起诉书范本
2015/05/19 职场文书
导游词之江西赣州
2019/10/15 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
Nginx实现会话保持的两种方式
2022/03/18 Servers
OpenFeign实现远程调用
2022/08/14 Java/Android