前言
在IM即时聊天室(一)中,我们了解了WebSocket的相关知识和基础API作为编写聊天室的基础。那么作为进阶篇,今天我们就来讲一讲Socket.io,欢迎到我的个人博客查看原帖。
1、什么是Socket.io?
简单来说,Socket.io封装了WebSocket以及其他的一些协议,是一个完全由JavaScript实现、基于Node.js、支持WebSocket的协议用于实时通信、跨平台的开源框架。
它包括了客户端的JavaScript和服务器端的Node.js并且实现了WebSocket的服务端代码。同时还有很强的兼容性,兼容各种浏览器以及移动设备。有了它,我们能更方便快捷地实现服务器端与客户端之间的实时通讯。
2、使用Socket.io(初始化)
服务端搭建:
服务端我使用的是Node.js,安装的话就直接点左边的链接下载对应的安装包就好啦,Linux稍麻烦一点需要配置一下node和npm的全局执行环境,网上有很多的教程,在这里就不赘述了。
安装好Node.js后,创建一个文件夹作为项目文件夹,定位到刚建的文件夹下,输入npm install socket.io
安装Socket.io
安装完成之后,可以看到文件夹下多了node_modules文件,里面全是刚下载的socket.io依赖包。
初始化服务端:
创建一个app.js文件作为服务端代码
/*app.js*/
/*构建http服务*/
var app = require('http').createServer()
/*引入socket.io*/
var io = require('socket.io')(app);
/*定义监听端口,可以自定义,端口不要被占用*/
var PORT = 8081;
/*监听端口*/
app.listen(PORT);
/**
*监听客户端连接
*io是我们定义的服务端的socket
*回调函数里面的socket是本次连接的客户端socket
*io与socket是一对多的关系
*/
io.on('connection', function (socket) {
/*所有的监听on,与发送emit都得写在连接里面,包括断开连接*/
})
对比WebSocket服务端初始化代码:
// 导入WebSocket模块:
const WebSocket = require('ws');
// 引用Server类:
const WebSocketServer = WebSocket.Server;
// 实例化: 在3000端口上打开一个WebSocket Server
const wss = new WebSocketServer({
port: 3000
});
//监听connection事件
wss.on('connection', function (ws){
/**
*监听客户端事件
*回调函数里面的socket是本次连接的客户端socket
*io与socket是一对多的关系
*/
});
WebSocket流程:导入Websocket模块 - 创建server - 在自定义端口创建实例 - 在该端口监听事件
Socket.io流程: 导入http模块 - 创建HttpServer - 基于HttpServer创建Socket.io实例 - 在自定义端口监听事件
可以看到,Socket.io的服务端初始化代码和WebSocket相比,流程相近。那么Socket.io的优势在哪呢?
1.Socket.IO已经具有众多强大功能的模块和扩展API
2.Socket.IO实现了实时、双向、基于事件的通讯机制,它解决了实时的通信问题,并统一了服务端与客户端的编程方式。启动了Socket以后,就像建立了一条客户端与服务端的管道,两边可以互通有无。
接下来是初始化客户端:
/**
*客户端初始化非常简单
*只需要创建一个实例并指向目标服务器,注意端口要与服务器端保持一致
*/
var socket = io('ws://localhost:8081');
//WebSocket客户端初始化代码:
var ws = new WebSocket("ws://localhost:3000");
3、使用Scoket.io(API函数介绍)
**
1、客户端部分:
**
- 客户端向服务器端发送消息
例如客户端向服务端发送登录请求
//login是自定义的事件,后面是带的参数
socket.emit('login',{username:uname})
- 监听服务端发来的信息
socket.on('String',function(data))
- 给除了自己以外的客户端广播消息
socket.broadcast.emit
**
2、服务端部分:
**
- 监听客户端连接,回调函数会传递本次连接的socket,下面列出的函数都要写在这个函数里
io.on('connection',function(socket));
- 给指定的客户端发送消息
io.sockets.socket(socketid).emit('String', data);
- 给所有客户端广播消息
io.sockets.emit('String',data);
- 给该socket的客户端发送消息
socket.emit('String', data);
- 监听客户端发送的信息
socket.on('String',function(data));