概念

Socket.io 是一个支持客户端和服务器之间的低延迟、双向和基于事件的通信的库,除了支持 JavaScript 以外,还支持 Java、Python、Golang。

Socket.io 构建在 WebSocket 协议之上,并提供了额外的保证,如回退到 HTT P长轮询或自动重新连接。和 Ajax、Fetch、Axios 不一样的是,WebSocket 支持客户端与服务器之间一直保持通信,除非其中一方主动断开连接。

开始

下面将从三个章节开始。第一个章节——建立项目;第二个章节——服务端,演示如何创建 Socket 服务;第三个章节——客户端,演示如何创建接收 Socket 服务的客户端。

建立项目

随便在你的电脑上创建一个父工程,我这里取名父工程为socketio。子工程依赖于父工程的node_modules,因此子工程无需再在 package.json 添加任何 dependencies 和 devDependencies。

父工程下创建两个子工程serverclient。所以,工程项目的目录结构是:

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 服务端。

  1. 导入 Server 对象;
  2. new Server 对象;
  3. 监听 connection 事件;
  4. 开启 Socket 服务端口号。
import { Server } from "socket.io";

const server = new Server({ /* options */ });

server.on("connection", (socket) => {
// ...
}); io.listen(3000);

客户端

客户端的 package.json 配置方式和服务端一样。以下是创建 Socket 客户端的步骤:

  1. 导入 lookup 函数连接服务端 URL;
  2. 监听 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的更多相关文章

  1. Vue3 + Socket.io + Knex + TypeScript 实现可以私聊的聊天室

    前言 下文只在介绍实现的核心代码,没有涉及到具体的实现细节,如果感兴趣可以往下看,在文章最后贴上了仓库地址.项目采用前后端模式,前端使用 Vite + Vue3 + TS:后端使用 Knex + Ex ...

  2. socket.io入门整理教程

    socket.io入门整理  发布于 5 年前  作者 dtrex  124983 次浏览  最后一次编辑是 1 年前 我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写 ...

  3. Socket.io 入门 - Renyi的博客

    Socket.io Vue 中使用 NPM 安装 npm install vue-socket.io --save npm install --save socket.io-client 引用 详情 ...

  4. socket.io简单入门(一.实现简单的图表推送)

    引子:随着nodejs蓬勃发展,虽然主要业务系统因为架构健壮性不会选择nodejs座位应用服务器.但是大量的内部系统却可以使用nodejs试水,大量的前端开发人员转入全堆开发也是一个因素. 研究本例主 ...

  5. Node.js、Express、Socket.io 入门

    前言 周末断断续续的写了第一个socket.io Demo.初次接触socket.io是从其官网看到的,看着get started做了一遍,根据官网的Demo能提供简单的服务端和客户端通讯. 这个De ...

  6. socket.io 入门教程

    转载自:http://deadhorse.me/nodejs/2011/12/29/socket.io_induction.html socket.io socket.io是一个以实现跨浏览器.跨平台 ...

  7. 转载:socket.io 入门

    原文链接:http://cnodejs.org/topic/50a1fcc7637ffa4155b5a264 我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单 ...

  8. socket.io 入门篇(三)

    本文原文地址:https://www.limitcode.com/detail/5926e3a056fba70278bf2044.html 前言 上篇我们介绍了 socket.io 中room的概念和 ...

  9. socket.io 入门篇(二)

    本文原文地址:https://www.limitcode.com/detail/5922f1ccb1d4fe074099d9cd.html 前言 上篇我们介绍了 socket.io 基本使用方法,本篇 ...

随机推荐

  1. GDKOI 2021 Day2 TG 总结

    又是爆炸的一天,炸多了本蒟蒻已经习以为常 但今天比昨天整整高了 40 分!!!!却还是没有 100 今天本蒟蒻本想模仿奆佬的打字速度,结果思路混乱让我无法开始 T1 不是吧怎么是期望 dp ,期望值怎 ...

  2. Git出现“filename too long”错误处理

    更新记录 本文迁移自Panda666原博客,原发布时间:2021年5月8日. 怎么肥事? Windows系统下,在Git使用过程中,出现"filename too long"错误提 ...

  3. LVGL库入门教程03-布局方式

    LVGL布局方式 LVGL的布局 上一节介绍了如何在 LVGL 中创建控件.如果在创建控件时不给控件安排布局,那么控件默认会被放在父容器的左上角. 可以使用 lv_obj_set_pos(obj, x ...

  4. 想学嵌入式?要不一起玩 Arduino 吧

    作者:HelloGitHub-Anthony 这里是 HelloGitHub 推出的<讲解开源项目>系列,本期介绍的是如何用开源硬件开发平台 Arduino,自己动手做一个温湿度显示器. ...

  5. Linux安装MySQL,数据库工具连接Linux的MySQL

    1.centOS中默认安装了MariaDB,需要先进行卸载 rpm -qa | grep -i mariadb rpm -e --nodeps 上面查出来的mariadb 2.下载MySQL仓库并安装 ...

  6. 不要使用短路逻辑编写 stl sorter 多条件比较

    前言 最近工期紧.任务多,没有时间更新博客,就水一期吧.虽然是水,也不能太水,刚好最近工作中遇到一个 sorter 多条件排序的问题,花费了半天时间来定位解决,就说说它吧. 背景 公司产品是一个跨端的 ...

  7. 关于'utf-8' codec can't decode byte 0xb9 in position 0: invalid start byte报错

    今天在使用vscode编译程序时,启动Python服务出现以下错误: 通过网络查找资料可以得知,是由于个人用户名非英文而导致,但是网上并没有说清楚是哪里的名字,以至于很多人会以为是以下地方: 实际上真 ...

  8. NC50528 滑动窗口

    NC50528 滑动窗口 题目 题目描述 给一个长度为N的数组,一个长为K的滑动窗体从最左端移至最右端,你只能看到窗口中的K个数,每次窗体向右移动一位,如下图: 你的任务是找出窗体在各个位置时的最大值 ...

  9. NC224938 加减

    NC224938 加减 题目 题目描述 小红拿到了一个长度为 \(n\) 的数组.她每次操作可以让某个数加 \(1\) 或者某个数减 \(1\) . 小红最多能进行 \(k\) 次操作.她希望操作结束 ...

  10. 0016:单源最短路径(dijkstra算法)

    题目链接:https://www.luogu.com.cn/problem/P4779 题目描述:给定一个 n 个点,m 条有向边的带非负权图,计算从 s 出发,到每个点的距离. 这道题就是一个单源最 ...