初学 Socket.io
概念
Socket.io 是一个支持客户端和服务器之间的低延迟、双向和基于事件的通信的库,除了支持 JavaScript 以外,还支持 Java、Python、Golang。
Socket.io 构建在 WebSocket 协议之上,并提供了额外的保证,如回退到 HTT P长轮询或自动重新连接。和 Ajax、Fetch、Axios 不一样的是,WebSocket 支持客户端与服务器之间一直保持通信,除非其中一方主动断开连接。
开始
下面将从三个章节开始。第一个章节——建立项目;第二个章节——服务端,演示如何创建 Socket 服务;第三个章节——客户端,演示如何创建接收 Socket 服务的客户端。
建立项目
随便在你的电脑上创建一个父工程,我这里取名父工程为socketio
。子工程依赖于父工程的node_modules
,因此子工程无需再在 package.json 添加任何 dependencies 和 devDependencies。
父工程下创建两个子工程server
和client
。所以,工程项目的目录结构是:
socketio
-node_modules
-server
-src
index.js
package.json
-client
-src
index.js
package.json
package.json
package-lock.json
导入依赖
导入 socket.io 和 socket.io-client 两个依赖包,外加热部署的 nodemon。
npm i socket.io socket.io-client nodemon
服务端
package.json
该子工程不需要添加任何依赖,依赖全部在父工程中。在 package.json 我们配置启动脚本:
{
"name": "server",
"version": "1.0.0",
"type": "module",
"scripts": {
"serverStart": "nodemon ./src/index.js"
}
}
创建服务端
在这里我们使用 ES6 模块导入语法,使用最简洁的方式创建 Socket 服务端。
- 导入 Server 对象;
- new Server 对象;
- 监听 connection 事件;
- 开启 Socket 服务端口号。
import { Server } from "socket.io";
const server = new Server({ /* options */ });
server.on("connection", (socket) => {
// ...
});
io.listen(3000);
客户端
客户端的 package.json 配置方式和服务端一样。以下是创建 Socket 客户端的步骤:
- 导入 lookup 函数连接服务端 URL;
- 监听 connect 事件。
import { io } from "socket.io-client";
const client = io("http://localhost:3000");
client.on("connect", () => {
// ...
});
在第一个步骤中,我说的是导入 lookup 函数,但实际却是 io 函数。因为 Socket.io 重命名了 lookup 函数的导出名称:
查看源码可知,lookup 有三个不一样参数的重载,并且通过重命名导出不一样。其实使用 io 和 connect 都可以,从第一个往后的所有参数都可不填,connect 第一个参数可以是字符串。所以,也可以像下面这样写:
import { connect } from "socket.io-client";
const client = connect("http://localhost:3000");
测试
客户端连接服务端时,客户端分配唯一 ID,当客户端连接到服务端时,服务端的监听事件 connection 可以从回调函数中获得客户端的 ID:
server
server.on("connection", (socket) => {
console.log(`An user connected, He is ${ socket.id }`);
});
client
client.on("connect", () => {
console.log(`Hi, I am ${ client.id }`);
});
最新文章
- webconfig中注册HttpHandler报错:检测到在集成的托管管道模式下不适用的 ASP.NET 设置。
- mssql 小技巧
- 在ubuntu上搭建开发环境4---ubuntu简单的搭建LAMP环境和配置
- android 多线程 示例
- ASP怎么解除文件上传200kb限制
- 本地ip被劫持,初始化hosts文件,及其作用与说明
- Netsharp快速入门(之6) 基础档案(创建导航菜单)
- java数据结构-非线性结构之树
- 数据的存储-NSKeyedArchiver和write to file介绍
- Python自动化运维之20、HTML
- delete 指针
- 简洁的jsp
- mysql常见错误码
- Ubuntu 安装Matlab2010a
- C++经典书目索引及资源下载
- 更改Windows Live Writer默认日志与草稿保存路径
- Git相关操作及记录
- 浅析redis缓存 在spring中的配置 及其简单的使用
- yii2 httpClient的用法
- java多线程系列(四)---ReentrantLock的使用
热门文章
- 【Spark】Day02:Spark-Core:RDD概述、RDD编程(转换算子、Action)、序列化、依赖关系、持久化、数据读取保存、累加器、广播变量、top10、转化率
- 使用sanic框架实现分布式爬虫
- uniapp(vue)实现点击左侧菜单,右侧显示对应的内容
- 洛谷P1605例题分析
- 基于U-Net网络的图像分割的MindStudio实践
- Git强制覆盖master
- Proxmark3 Easy 如何流畅的在Linux中操作?
- Python 文件操作(IO 技术)
- python进阶之路5之流程控制(垃圾回收机制)
- Java程序员用代码,计算最大公约数和最小公倍数