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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
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中对数据库操作的封装
2006/10/09 PHP
实用函数2
2007/11/08 PHP
PHP循环获取GET和POST值的代码
2008/04/09 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
PHP文件操作实例总结
2016/09/27 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
python实现的希尔排序算法实例
2015/07/01 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
什么是python的函数体
2020/06/19 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
销售实习自我鉴定
2013/12/07 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
培训研修方案
2014/06/06 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
讲解Python实例练习逆序输出字符串
2022/05/06 Python
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers