入门 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 }`);
});
入门 Socket.io的更多相关文章
- Vue3 + Socket.io + Knex + TypeScript 实现可以私聊的聊天室
前言 下文只在介绍实现的核心代码,没有涉及到具体的实现细节,如果感兴趣可以往下看,在文章最后贴上了仓库地址.项目采用前后端模式,前端使用 Vite + Vue3 + TS:后端使用 Knex + Ex ...
- socket.io入门整理教程
socket.io入门整理 发布于 5 年前 作者 dtrex 124983 次浏览 最后一次编辑是 1 年前 我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写 ...
- Socket.io 入门 - Renyi的博客
Socket.io Vue 中使用 NPM 安装 npm install vue-socket.io --save npm install --save socket.io-client 引用 详情 ...
- socket.io简单入门(一.实现简单的图表推送)
引子:随着nodejs蓬勃发展,虽然主要业务系统因为架构健壮性不会选择nodejs座位应用服务器.但是大量的内部系统却可以使用nodejs试水,大量的前端开发人员转入全堆开发也是一个因素. 研究本例主 ...
- Node.js、Express、Socket.io 入门
前言 周末断断续续的写了第一个socket.io Demo.初次接触socket.io是从其官网看到的,看着get started做了一遍,根据官网的Demo能提供简单的服务端和客户端通讯. 这个De ...
- socket.io 入门教程
转载自:http://deadhorse.me/nodejs/2011/12/29/socket.io_induction.html socket.io socket.io是一个以实现跨浏览器.跨平台 ...
- 转载:socket.io 入门
原文链接:http://cnodejs.org/topic/50a1fcc7637ffa4155b5a264 我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单 ...
- socket.io 入门篇(三)
本文原文地址:https://www.limitcode.com/detail/5926e3a056fba70278bf2044.html 前言 上篇我们介绍了 socket.io 中room的概念和 ...
- socket.io 入门篇(二)
本文原文地址:https://www.limitcode.com/detail/5922f1ccb1d4fe074099d9cd.html 前言 上篇我们介绍了 socket.io 基本使用方法,本篇 ...
随机推荐
- c++ 辗转相除(动图)
#include<iostream> #include<cstdio> #include<iomanip> #include<cstring> usin ...
- markdowm使用学习
markdowm学习 标题(#/##/###/####) 三级标题 四级标题 字体(*/) hello world! hello world! hello world! hello world! he ...
- java8 Stream新特性
import lombok.Getter; import lombok.Setter; @Setter @Getter public class Person { private String nam ...
- Mybatisi和Spring整合源码分析
一.MybatisSpring的使用 1.创建 Maven 工程. 2.添加依赖,代码如下 <dependency> <groupId>org.mybatis</grou ...
- JS:Array
js有五种基本数据类型:string,number,boolean,null,undefined 一种引用类型,包括:1.Object类型:2.Function类型:3.Array类型:4.RegEx ...
- CAD图在线Web测量工具代码实现(测量距离、面积、角度等)
CAD如今在各个领域均得到了普遍的应用并大大提高了工程技术人员的工作效率.在桌面端,AutoCAD测量工具已经非常强大:然后在Web端,如何准确.快速的对CAD图在Web进行测量呢? 功能 能Web在 ...
- 深入理解 Java 对象的内存布局
对于 Java 虚拟机,我们都知道其内存区域划分成:堆.方法区.虚拟机栈等区域.但一个对象在 Java 虚拟机中是怎样存储的,相信很少人会比较清楚地了解.Java 对象在 JVM 中的内存布局,是我们 ...
- 广西省行政村边界shp数据/广西省乡镇边界/广西省土地利用分类数据/广西省气象数据/降雨量分布数据/太阳辐射数据
数据下载链接:数据下载链接 广西壮族自治区,地处中国南部,北回归线横贯中部,属亚热带季风气候区.南北以贺州--东兰一线为界,此界以北属中亚热带季风气候区,以南属南亚热带季风气候区. 数据范围:全 ...
- dolphinscheduler简单任务定义及复杂的跨节点传参
dolphinscheduler简单任务定义及跨节点传参 转载请注明出处 https://www.cnblogs.com/funnyzpc/p/16395094.html 写在前面 dolphinsc ...
- HashSet集合存储数据的结构和HashSet集合存储元素不重复的原理
HashSet集合存储数据的结构 HashSet集合存储元素不重复的原理 //创建HashSet集合对象 Hashset<String> set = new HashSet<> ...