webSocket那些事之socket.io

Posted 2021-04-25 小韩说理

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webSocket那些事之socket.io相关的知识，希望对你有一定的参考价值。

写在前面

本文涉及:

WebSocket原理
浏览器端语法
php实用WorkerMan实现WebSocket服务器端
socket.io
NodeJS下的WebSocket
握手认证流程
WebSocket协议

本文是第二部分，主要说明socket.io的基本语法.

可以参考

或者后边的部分, 了解案例和协议分析.

https://github.com/hanzkering/webSocket-basic.git

输入 websocket, nodejs, socketio 获取相关文章

4, socket.io

socket.is是一套比较常见的基于websocket的即时通讯解决方案，它同时包含了浏览器端和服务器端webSocket协议实现. socket.io同时实现了包含webSocket在内的多种浏览器端与服务器端即时通讯解决方案, 他们是:WebSocket、htmlfile、xhr-polling(轮询)、jsonp-polling(jsonp轮询), 并且统一接口, 自动切换. 这就意味着如果我们使用socket.io，那么即使浏览器不支持webSocket协议,也会使用其他的技术来实现即时通讯. 而不用去修改客户端和服务器端的代码.

socket.io的服务器端实现，是基于NodeJS的. 我们要使用socket.io, 那需要服务器端为NodeJS或者是使用其他的web服务器代理转发到NodeJS上.

其官网为:https://socket.io/, 大家可以得到最全面的信息.

下面就开始演示socket.io的用法.

4.1, 服务器端

4.1.1 安装NodeJS(已安装的跳过此步)

目前的最新版本是v8.1.0. 根据自己的操作系统选择合适的安装介质, 执行安装即可.

4.1.2 安装socket.io

利用npm安装即可:

$ cd websocket    

$ npm install socket.io

运行完毕后，node_modules/目录中可以找到安装的socket.io模块. 嗯，大家一定还会看到一些其他的模块，这是相应的一些依赖.

4.1.3 基础服务器端代码

参考文件: ws-server-socketio.js

ws-server-socketio.js

// 初始化socket.io, 监听，8042端口

var io = require('socket.io')(8042);

// 利用定时器，循环向浏览器端推送推送timerServer事件, 并携带当前事件作为数据

setInterval(function() {

  io.sockets.emit('timerServer', {

    time: 'Hello Client! Now is ' + (new Date()).toTimeString()

  });  

}, 5000);

// 处理客户端socket连接

io.on('connection', function (socket) {

  // 连接成功

  console.log('Client: ' + socket.id + ' was connected!');

  // 响应浏览器的timerClient事件

  socket.on('timerClient', function (data) {

    console.log('Message From client: ' + data.time);

  });

});

以上代码与我们基本测试当中实现的服务器功能一致，都是定时的向浏览器端推送数据, 以及响应浏览器所发送过来的数据.

主要有三个工作:

初始化
定时向所有的连接客户端推送timerServer事件
当有客户端连接时为该客户端绑定timerClient事件处理器

下面运行该服务器代码, 在命令行，执行下面的命令:

$ node ws-server-socketio.js

此时，我们就有一台可以接受浏览器端的websocket请求的服务器在运行了.

接下来我们处理客户端.

4.2 客户端

参考文件: ws-client-socketio.html

ws-client-socketio.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>socket.io 客户端</title>

</head>

<body>

<!-- 该文件socket.io.js会在npm安装socket.io时,携带 -->

<script ></script>

<script>

  // 连接服务器

  var socket = io.connect('http://localhost:8042/');

  // 或者

  // var socket = io.connect('ws://localhost:8042/');

  // 响应服务器端推送过来的，timerServer事件

  socket.on('timerServer', function (data) {

    console.log("Message from server: " + data.time);

  });

  // 每隔3秒向服务器端推送一个timerClient事件,，并携带当前时间作为数据，

  setInterval(function() {

    socket.emit('timerClient', { time: (new Date()).toTimeString() });

  }, 3000);

</script>  

</body>

</html>

以上客户端代码，这个工作也是主要有三件事情:

初始化socket.io, 包括载入客户端js文件(socket.io.js)以及去连接我们websocket服务器.
响应服务器端推送的事件
每隔三秒向服务器发送一个事件

将此html文件, 以及依赖的js文件，放到可以通过浏览器访问到的位置. 然后请求该html文件. 浏览器会连接我们上面启动的服务器端, 并相互推送和处理事件.

4.3 测试结果

如图所示.

还是可以看到, 浏览器端与服务器端相互接收到消息的结果.

通过以上的基础代码展示和测试结果，你可以看到我们在浏览器端和服务器端完成了即时通讯. 本测试不含任何的业务逻辑，只是演示如何完成浏览器端和服务器端的通讯.

4.4 socket.io常用API

接下来整理一下常用的API.

4.4.1 服务器端

载入socket.io模块
require(‘socket.io’)

初始化服务器
基于httpServer构建
io = new Server(httpServer[, options])
或
io = require(‘socket.io’)(httpServer[, options])
直接监听某端口
io = new Server(port[, options])

关闭服务器
io.close([callback])

监听客户端连接
io.on(‘connection’,function(socket){});
回调函数会传递本次连接的socket.

已连接的所有客户端socket
io.sockets

某个客户端socket
io.sockets.socket(socketid)

socket.id
socket.id

给全部客户端推送事件
io.sockets.emit(‘userEventType’, data);

给指定的客户端socket推送事件
io.sockets.socket(socketid).emit(‘userEventType’, data);
socket.emit(‘userEventType’, data);

给除了自己以外的客户端广播消息
socket.broadcast.emit(“userEventType”, data);

监听客户端发送的信息
socket.on(‘userEventType’,function(data){});

关闭当前客户端连接
socket.disconnect(close)

监听浏览器发送事件
socket.on(“userEventType”,function(data) {})

room操作, 加入指定room
socket.join(room[, callback]), 可以是rooms(Array)

room操作, 退出指定room
socket.leave(room[, callback])

room操作, 指定room广播
socket.to(‘roomName’) 别名socket.in(‘roomName’)
单room
socket.to(‘roomName’).emit(‘userEventType’, data);
多room
socket.to(‘roomName1’).to(‘roomName2’).emit(‘userEventType’, data);
对room的用户发送信息, 不包括自己
socket.broadcast.to(‘roomName’).emit(‘userEventType’, data);

对room的用户发送信息
io.sockets.in(‘roomName’).emit(‘userEventType’, data);

获取所有room信息
io.sockets.manager.rooms

获取此socketid所在的房间信息
io.sockets.manager.roomClients[socket.id]

所有在此房间的socket实例
io.sockets.clients(‘roomName’)