原文地址:关于socket.io的使用

这段时间学习了socket.io,用它写了小项目,在此总结下它的基本使用方式和一些要点。

socket.io是基于Node.jsWebSocket协议的实时通信开源框架,它包括客户端的JavaScript和服务器端的Node.js。

服务端

这里后端使用的框架是koa2socket.io将自身绑定到koa的进程中去,其中最重要的事件就是 connectiondisconnect。它们是框架本身定义的系统事件,也就意味着它是自然就存在的不需要我们自定义,当然还有其它系统事件,但很少会用得到。

const koa = require('koa')
const app = new koa()
const server = require('http').createServer(app.callback())
const io = require('socket.io')(server) //监听connect事件
io.on('connection', socket => {
socket.emit('open');//通知客户端已连接
console.log('connected'); //监听disconnect事件
socket.on('disconnect', () => {
console.log('disconnect')
}
});
server.listen(3001);

客户端

web端直接传入url地址即可,其中这里监听的 open 事件是用户自定义的,对应服务端的则是发送open事件。

import io from 'socket.io-client';

//建立websocket连接
const socket = io('http://127.0.0.1:3001'); //收到server的连接确认
socket.on('open', () => {
showTip('socket io is open !');
init();
});

emit 和 on

emiton 是最重要的两个api,分别对应 发送监听 事件。

  • socket.emit(eventName[, ...args]):发射(触发)一个事件
  • socket.on(eventName, callback):监听一个 emit 发射的事件

我们可以非常自由的在服务端定义并发送一个事件emit,然后在客户端监听 on,反过来也一样。

发送的内容格式也非常自由,既可以是基本数据类型 NumberStringBoolean 等,也可以是 ObjectArray 类型,甚至还可以是函数。而用回调函数的方式则可以进行更便携的交互。

/*** 服务端 **/
socket.on('message',data =>{
console.log(data)
}); socket.emit('send','hello everybody'); /*** 客户端 **/
socket.emit('message',{id:'1',txt:'hello'}); socket.on('send',data =>{
console.log(data);
}); //回调函数
/*** 服务端 **/
socket.on('sayit', (word, callback)=> {
callback('say ' + word);
}); /*** 客户端 **/
socket.emit('sayit', 'wow', data => {
console.log(data); // say wow
});

broadcast 广播

broadcast 默认是向所有的socket连接进行广播,但是不包括发送者自身,如果自己也打算接收消息的话,需要给自己单独发送。

/*** 服务端 **/
io.on('connection', socket => {
const data= {
txt:'new user login',
time:new Date()
}
//广播向所有socket连接
socket.broadcast.emit('userin',data);
//给自己也发一份
socket.emit('userin',data);
});

namespace 命名空间

如果你想隔离作用域,或者划分业务模块,namespace 是个有效的法子。namespace 相当于建立新的频道,你可以在一个 socket.io 服务上面隔离不同的连接,事件和中间件。

默认的连接也是有namespace的,那就是 /

使用命名空间的方式一:直接在链接后面加子域名,这种其实用的还是同一个 sokcet 服务进程,可以看成是软隔离吧。

/*** 客户端 **/
import io from 'socket.io-client'; //默认的namespace
const socket = io('http://127.0.0.1:3001');
// mypath
const socket = io('http://127.0.0.1:3001/mypath', { forceNew: true }); /*** 服务端 **/
//默认的namespace
io.on('connection', socket => {
});
// mypath
io.of('/mypath').on('connection', socket => {
});

使用命名空间的方式二: path 参数,这种就是实打实的重新起了一个 socket 服务了。

/*** 客户端 **/
const socket = io('http://localhost', {
path: '/mypath'
}); /*** 服务端 **/
// 另外重新起socket服务
const io = require('socket.io')({
path: '/mypath'
});

middleware 中间件

socket.io 的中间件 和 kao2 的非常相似,这意味着我们可以在变动很小的情况下,将koa2的中间件改造为 socket.io 所用。

const mypath = io.of('/mypath').on('connection', socket => {
socket.on('message', data => {
});
}); //中间件
const auth = (socket, next) => {
const data = socket.request;
if(!verify(data)){
throw new Error('not verify');
}
next();
}
// mypath 这个 namespace 注册中间件
mypath.use(auth);

rooms

每一个socket连接都会有一个独一无二的标志,那就是 socket.id,我们就是通过id来区分不同连接的。除此之外,socket.id 本身也是房间 room 的标志,通俗讲,每个socket 连接自身都拥有一间房 room。那么我们就可以给这个 room 发送消息,还有如果你加入了房间,就能接受到房间里的广播信息。当然你可以自定义 room ,让socket连接加入或离开。还有如果 socket 断开连接,也就是 disconnect 后,它会被自动移出room。

而这就是实现 单独聊天群组聊天 的基础,来看一下对应的api。

  • socket.join(rooms[, callback]):加入房间
  • socket.leave(room[, callback]) :离开房间
  • socket.to(room): 给房间发送消息
// 自定义room
io.on('connection', socket =>{
socket.join('some room')); // 加入房间
socket.leave('some room'); // 离开房间
}); // 向房间里的所有客户端发送消息
io.to('some room').emit('some event'); // 默认房间(每一个id一个room)
socket.on('say to someone', (id, msg) => {
socket.broadcast.to(id).emit('my message', msg);
});

总结

相信有了以上介绍的基础知识,再加上官网对应的文档,要开发聊天室或者其他 实时通信 的项目,是一件易如反掌的事情

socket.io官网 里面有对 api 非常详细的讲解和用例。

关于socket.io的使用的更多相关文章

  1. 在web浏览器上显示室内温度(nodeJs+arduino+socket.io)

    上次的nodejs操作arduino入门篇中实现了如何连接arduino.这次我们来实现通过arduino测量室内温度并在浏览器上显示出来. [所需材料] 硬件:LM35温度传感器,arduino u ...

  2. Node学习笔记(三):基于socket.io web版你画我猜(二)

    上一篇基础实现的功能是客户端canvas作图,导出dataURL从而实现图片信息推送,下面具体讲下服务端的配置及客户端的配置同步 首先先画一个流程图,讲下大概思路 <canvas id=&quo ...

  3. node.js+socket.io配置详解

    由于我是在win7的环境下,在这里就以win7系统为例进行讲解了. 首先需要在nodejs官网下载最新版的node.js,下载完毕直接安装即可,安装成功后在cmd命令行中执行node指令,如下结果就说 ...

  4. 使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  5. socket.io简单入门(一.实现简单的图表推送)

    引子:随着nodejs蓬勃发展,虽然主要业务系统因为架构健壮性不会选择nodejs座位应用服务器.但是大量的内部系统却可以使用nodejs试水,大量的前端开发人员转入全堆开发也是一个因素. 研究本例主 ...

  6. websocket与socket.io

    什么是Websocket? Websocket是一个独立于http的实时通信协议,最初是在HTML5中被引用进来的,在HTML5规范中作为浏览器与服务器的核心通信技术被嵌入到浏览器中.WebSocke ...

  7. socket.io安装部署

    需要node.js环境 创建package.json npm init 下载相关依赖 npm install --save express@4.10.2npm会在当前目录下载所需要的依赖到node_m ...

  8. Node.js、Express、Socket.io 入门

    前言 周末断断续续的写了第一个socket.io Demo.初次接触socket.io是从其官网看到的,看着get started做了一遍,根据官网的Demo能提供简单的服务端和客户端通讯. 这个De ...

  9. socket.io,io=Manager(source, opts)

    原文:http://www.cnblogs.com/xiezhengcai/p/3968067.html 当我们在使用 var socket = io("ws://103.31.201.15 ...

  10. socket.io,命名空间

    原文:http://www.cnblogs.com/xiezhengcai/p/3966263.html 命名空间 在api部分我们说io.connect('ws://103.31.201.154:5 ...

随机推荐

  1. Linux 下常用的Shell 命令

    英文原文链接:https://www.lopezferrando.com/30-interesting-shell-commands/ 1. 监控命令(每2秒运行一次) watch "ls ...

  2. 记住这个网站:服务器相关数据统计网站 http://news.netcraft.com/

    http://news.netcraft.com/ 需要参考现在服务器相关数据,可以上这个网站. 当然google趋势也是一个可选得备案. 有一个数据统计更全面的: http://w3techs.co ...

  3. IT桔子沙龙之本地生活服务O2O探路者笔记整理

    这个沙龙活动侧重于创业融资与投资角度 主持人:真格基金投资分析师顾女士;E-mail:grace@zhenfund.com;新浪微博:@顾三小姐 赞助商七牛云的服务宣传:静态资源托管:上传下载全网加速 ...

  4. vfd with stm8

    2018-01-14 22:50:26 之前写了pt6311的驱动,要做时钟考虑使用stm8做主控,于是乎将之前的驱动移植到stm8上. 顺带熟悉了stm8的操作2333. 上源码: #ifndef ...

  5. 用Python+qrcode库创建一个包含信息的二维码

    安装qrcode库和PIL库 在命令行中分别输入pip install qrcode 和pip install pillow 导入库格式如下: import PIL import qrcode 下面以 ...

  6. python3+requests:使用类封装接口测试脚本

    前言:接口测试用例较多,我们不可能每个用例都写一次requests,get或者requests,post等,所以对共用方法要进行封装处理 第一次修改:将get请求和post请求单独定义出来,使用过程中 ...

  7. 能否使用require('.json')的方式加载大量JSON文件?

    Node.js中推崇非阻塞I/O,但是require一个模块时却是同步调用的,这会带来性能上的开销,但并不是每次require都很耗时,因为在require成功之后会缓存起来,在此加载时直接从缓存读取 ...

  8. Mysql:查询每个月下的数据,根据状态或者年份的sql语句

     ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本次的MySQL开篇记录了一道面试题,我给其扩展一下 这面试题它难点在什么地方,不外乎是操作月份和将其展示的 ...

  9. vi/vim操作

    vi/vim是unix/linux操作系统下的文本编辑器. 由于unix/linux万物届文件的特性,vi/vim可以编辑任何格式的文件. 下面是常见的知识点,仅供参考: 编辑方式:vi/vim + ...

  10. Python +selenium自动化环境的搭建

    Python +selenium+googledriver 小白的血泪安装使,不停的总结写心得是理解透彻的毕竟之路 一,python的安装: 首先去Python的官网下载安装包:https://www ...