原文地址:关于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. async/await 的基本实现和 .NET Core 2.1 中相关性能提升

    前言 这篇文章的开头,笔者想多说两句,不过也是为了以后再也不多嘴这样的话. 在日常工作中,笔者接触得最多的开发工作仍然是在 .NET Core 平台上,当然因为团队领导的开放性和团队风格的多样性(这和 ...

  2. Linux 下常用的Shell 命令

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

  3. 各种代码版本控制工具下使用http代理的方法

    原文:各种SCM工具下使用http代理下载源码:http://www.linuxeden.com/html/develop/20090723/66951.html SCM是软件配置管理的简称,常见的S ...

  4. svn Server sent unexpected return value (403 Forbidden) in response to CHECKOUT

    今天,提交資料到公司svn服務器,但是一直提示 Server sent unexpected return value (403 Forbidden) in response to CHECKOUT ...

  5. 自定义用户认证(继承django的)

    1.在app下创建一个自己用户认证文件,文件名随意,记得为.py文件 2.编辑该userauth.py文件 #!/usr/bin/env python #coding:utf-8 from djang ...

  6. Heap

    #include using namespace std; int heap[100010],cnt=0; void put(int x) { cnt++; heap[cnt]=x; int now= ...

  7. 一天搞懂深度学习-训练深度神经网络(DNN)的要点

    前言 这是<一天搞懂深度学习>的第二部分 一.选择合适的损失函数 典型的损失函数有平方误差损失函数和交叉熵损失函数. 交叉熵损失函数: 选择不同的损失函数会有不同的训练效果 二.mini- ...

  8. 网络-udp

    1. 网络:把双方或者多方的设备(电脑,智能手机,ipad等)连接起来的一个工具     1.1 学习网络的目的: 通过网络把数据从一方传递到另外一方,完成数据的共享 2. ip地址     2.1: ...

  9. mac下安装Python3.*(最新版本)

    前言:mac系统自带python,不过以当前mac系统的最新版本为例,自带的python版本都是2.*版本,虽然不影响老版本项目的运行,但是python最新的3.*版本的一些语法与2.*版本并不相同, ...

  10. Robot framework(RF) 用户关键字

    3.6  用户关键字 在Robot Framework 中关键字的创建分两种:系统关键字和用户关键字. 系统关键字是需要通过脚本开发相应的类和方法,从而实现某一逻辑功能. 用户关键字是根据业务的需求利 ...