java基础android技术

Socket.IO打造基础聊天室

2017-12-18  本文已影响714人  一个笑点低的妹纸
Socket.IO

01 Socket.io 简介

Socket.io方法与事件

主要特点】:

(1) 可靠性(Reliability):依赖 Engine.IO, 首先建立长轮询,然后试着升级到更好的传输方式,如 WebSocket。
(2)自动重连(Auto-reconnection support):除非手动设置,否则当客户端断开连接时会一直尝试重连。
(3)心跳检测(Disconnection detection):在 Engine.IO 层面实现的心跳检测机制,允许服务器和客户端知道哪一方不再响应。

Engine.IO:为 Socket.IO 实现的基于传输、跨浏览器/跨设备的双向通信层。

(4)其它特点(如下图):

socket.io其它特点

02 工作流程

Socket.IO 底层是 Engine.IO,这个库实现了跨平台的双向通信,使用下面的传输方式封装了一套自己的 Socket 协议(EIO Socket)。

默认情况下,一个完整的 EIO Socket 包括多个 XHR 和 WebSocket 连接:

一个完整的EIO Socket连接(默认情况) 请求流程

EIO Socket 会首先发起XHR长轮询,然后服务端会返回以下字段:

前端收到握手的 upgrades 后,EIO 会检测浏览器是否支持 WebSocket,如果支持,就会启动一个 WebSocket 连接,然后通过这个 WebSocket 往服务器发一条内容为 probe, 类型为 ping 的数据。如果这时服务器返回了内容为 probe, 类型为 pong 的数据,前端就会把前面建立的 HTTP 长轮询停掉,后面只使用 WebSocket 通道进行收发数据。(socket.io 的详细工作流程是怎样的?

心跳检测:
EIO Socket生命周期内,会间隔一段时间 ping - pong 一次,用来测试网络是否正常

WebSocket消息帧

绿色:发送;白色:接收。
类型—> 2:ping,3:pong,4:message。

Socket.IO 在 Engine.IO 的基础上做了一些封装,比如 Socket.IO 里面这样的代码:

io.emit('add user', 'm') ;

在 Engine.io 里面是这样:

eio.send('message', '2["add user","m"]') ; // 2 是 socket.io 定义的包类型

因此,message的类型4后面有个2。

传输机制设置】:

Socket.io 为我们提供了选项,它的默认情况是以长轮询开始,我们也可以手动设置成只使用 websocket 方式来进行通信。

// 设置成只使用 websocket
const socket = io({ 
       transports: ['websocket'] 
}); 

// 重连时,重设选项
// 防止 websocket 可能因为代理、防火墙、浏览器等原因连接失败socket.on('reconnect_attempt', () => { 
       socket.io.opts.transports = ['polling', 'websocket']; 
}); 
只使用websocket

03 核心方法

Socket.io提供的方法

Socket.io 的核心函数:emiton

socket.emit(eventName[, ...args][, ack]):用来发射(触发)一个事件

socket.emit('ferret', 'tobi', (data) => {
  console.log(data); // data will be 'woot'
});

// server:
//  io.on('connection', (socket) => {
//    socket.on('ferret', (name, fn) => {
//      fn('woot');
//    });
//  });

socket.on(eventName, callback):用来监听一个 emit 发射的事件

socket.on('news', (data) => {
  console.log(data);
});

// with multiple arguments
socket.on('news', (arg1, arg2, arg3, arg4) => {
  // ...
});
// with callback
socket.on('news', (cb) => {
  cb(0);
});

Socket.io 提供了三种默认的事件(客户端和服务器都有):

除了 socket.io 自身提供的事件之外,还支持自定义事件,丰富了通信:

// 如:
socket.on(‘new message’, function(data) {});
socket.emit(‘new message’, { message: message });

服务端广播的三种情况】:

服务器广播

客户端:

const socket = io();
// 监听事件
socket.on(‘message’, (data) => {});
// 触发事件
socket.emit(‘message’, { message }); 

服务端:

io.on(‘connection’, function(socket) {
        socket.on(‘message’, function(data) {
              // 1.广播给自己
              socket.emit(‘message’, data);
              // 2. 广播给除了自己的其它客户端
              socket.broadcast.emit(‘message’, data);
              // 3. 广播给所有客户端
              io.emit(‘message’, data);  // 等同于 io.sockets.emit()
        });
});

04 Rooms 和命名空间

【作用】:减少TCP连接数的同时区分不同的通信频道(在不同的路由层面能体现该作用,具体请参考 socket.io 中namespace 和 room的概念)、实现私聊

默认的命名空间:io.sockets、io

io.on('connection', function(socket){    
      socket.on('disconnect', function(){ });
}); 

自定义命名空间:

// 服务器端
var nsp = io.of('/my-namespace'); 
nsp.on('connection', function(socket){    
      socket.on('disconnect', function(){ });
}); 

// 客户端
var socket = io('/my-namespace'); 

Rooms:

// 自定义room
io.on('connection', function(socket){    
      socket.join('some room')); // 加入房间
      socket.leave('some room'); // 离开房间
}); 

// 向房间里的所有客户端发送消息
io.to('some room').emit('some event'); 

// 默认房间(每一个id一个room)
socket.on('say to someone', function(id, msg){    
       socket.broadcast.to(id).emit('my message', msg); 
}); 

获取房间信息:socket.adapter.rooms

rooms对象

默认情况下,每一个 id 便自成一个房间,房间名为 socket.id(指定命名空间之后,前面会带上命名空间);
自定义房间之后,原先的默认房间仍然存在;
房间为一个对象,包含当前进入房间的 sockets 以及长度。

05 打造基础聊天室

从官网最基础的聊天小例子入门,又分析了一下 Demos 中的 Chat demo 源码之后,自己试着用 react 实现了一遍,具体的功能及原理如下:

私人聊天

【实现原理】:运用 Room,通过 socket.adapter.rooms 获取当前 room 的信息,包括每个 room 中的 id。

// 加入房间
socket.join('some room'); 
// 离开房间
socket.leave('some room'); 

// 向房间里的所有客户端发送消息
io.to('some room').emit('some event'); 

// 向房间中的除了自己的客户端发送消息
socket.broadcast.to ('some room')
    .emit('my message', msg);
自娱自乐的实现版本:

github地址:ioChat

添加昵称+xxx正在输入 监听用户进入或离开/显示在线人数 Rooms 实现私人聊天

ps:下一次我会出一篇聊天室实现 emoji 表情发送的文章,敬请期待哟~~٩(๑>◡<๑)۶ ~~

§ 参考资料

上一篇下一篇

猜你喜欢

热点阅读