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 相关文章推荐
实现变速回到顶部的JavaScript代码
May 09 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
javascript常用方法汇总
Dec 02 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
js数组常用最重要的方法
Feb 04 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
JS 文件大小判断的实现代码
2010/04/07 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
简单的js计算器实现
2016/10/26 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
elementui的默认样式修改方法
2018/02/23 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
python里 super类的工作原理详解
2019/06/19 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
珍珠鸟教学反思
2014/02/01 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
烈士陵园观后感
2015/06/08 职场文书
经典爱情感言
2015/08/03 职场文书
干部理论学习心得体会
2016/01/21 职场文书
Python实现排序方法常见的四种
2021/07/15 Python
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技