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中获取Radio元素值的方法
Jul 02 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
angular.js实现购物车功能
Oct 23 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
用js实现放大镜效果
Oct 28 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设计模式 Composite (组合模式)
2011/06/26 PHP
php生成扇形比例图实例
2013/11/06 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
PHP数组实例详解
2016/06/26 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
CSS常用网站布局实例
2008/04/03 Javascript
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
详解JS数值Number类型
2018/02/07 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
办公室前台岗位职责
2014/01/04 职场文书
上级检查欢迎词
2014/01/18 职场文书
公司年终奖分配方案
2014/06/16 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
导游词之介休绵山
2019/12/31 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android