当前位置： 首页 > news >正文

如何搭建一个 websocket

news 2025/11/27 11:15:02

环境:

  • NodeJs
  • socket.io 4.7.2

安装依赖

yarn add socket.io

创建服务器

引入文件

特别注意: 涉及到 colors 的代码，请采取 console.log() 打印

// 基础老三样
import http from "http";
import fs from "fs";
import { Server } from "socket.io";// 下面2个是我本地开发的,你们可能没有
import colors from "colors-console";
import constant_color from "./colors.js";

createServer

请在当前目录下创建 index.html 文件。【客户端需要连接 socket.io】

<script src="/socket.io/socket.io.js"></script><script>constsocket = io();
</script>

服务端代码：

const server = http.createServer((req, res) => {fs.readFile("./index.html", "utf-8", (err, data) => {if (err) {res.writeHead(500, "utf-8", e);res.end();}res.writeHead(200, {"Content-Type": "text/html"});res.end(data, "utf-8");});
});

websocket

简单判断客户端是否连接，断开。

const io = new Server(server);io.on("connection", socket => {console.succ("User connected.");// 用户断开连接socket.on("disconnect", () => {console.err("User disconnected.");})
});server.listen(3000, "127.0.0.1");

启动服务器

yarn app

在这里插入图片描述

附录

再次提醒： 请去除所有 console.err console.succ colors 等有关颜色内容
在这里插入图片描述
项目结构：【它们都是同级目录，最顶层】

D:.
│  app.js
│  colors.js
│  index.html
│  package.json
│  yarn.lock
│
└─node_modules

app.js 代码：

import http from "http";
import fs from "fs";
import { Server } from "socket.io";
import colors from "colors-console";
import constant_color from "./colors.js";// 重写 console.err 
console.err = (...msg) => {let str = "";for (let i = 0; i < msg.length; i++) {str += msg[i] + " ";}console.log(colors(constant_color.red, str));
}// 定义 console.succ
console.succ = (...msg) => {let str = "";for (let i = 0; i < msg.length; i++) {str += msg[i] + " ";}console.log(colors(constant_color.green, str));
}const server = http.createServer((req, res) => {fs.readFile("./index.html", "utf-8", (err, data) => {if (err) {res.writeHead(500, "utf-8", e);res.end();}res.writeHead(200, {"Content-Type": "text/html"});res.end(data, "utf-8");});
});const io = new Server(server);io.on("connection", socket => {console.succ("User connected.");// 用户断开连接socket.on("disconnect", () => {console.err("User disconnected.");})
});server.listen(3000, "127.0.0.1");console.log("Server running at \x1B[36m\x1B[4mhttp://127.0.0.1:3000\x1B[0m");

index.html 代码：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="/socket.io/socket.io.js"></script>
</head><body><h1>Hello Friend! 😀</h1><script>const socket = io();</script>
</body></html>

相关文章：

如何搭建一个 websocket

环境: NodeJssocket.io 4.7.2 安装依赖 yarn add socket.io创建服务器 引入文件 特别注意: 涉及到 colors 的代码&#xff0c;请采取 console.log() 打印 // 基础老三样 import http from "http"; import fs from "fs"; import { Server } from &quo…...

编程日记 2023/10/8 11:28:07

pip常用命令

TOC(pip常用命令) 1.pip 2.where pip 3.pip install --upgrade pip 4.安装 这里暂用flask库举例&#xff0c;安装flask库&#xff0c;默认安装最新版&#xff1a; pip install flask指定要安装flask库的版本&#xff1a; pip install flask版本号我们在安装第三方库时可…...

编程日记 2023/10/8 11:27:06

[QT编程系列-43]: Windows + QT软件内存泄露的检测方法

目录 一、如何查找Windows程序是否有内存泄露 二、如何定位Windows程序内存泄露的原因 二、Windows环境下内存监控工具的使用 2.1 内存监测工具 - Valgrind 2.2.1 Valgrind for Linux 2.2.2 Valgrind for Windows 2.2 内存监测工具 - Dr. Memory 2.2.1 特点 2.2.2 安装…...

编程日记 2023/10/8 11:23:02

【Java-LangChain:使用 ChatGPT API 搭建系统-5】处理输入-思维链推理

第五章&#xff0c;处理输入-思维链推理 在本章中&#xff0c;我们将专注于处理输入&#xff0c;即通过一系列步骤生成有用地输出。 有时&#xff0c;模型在回答特定问题之前需要进行详细地推理。如果您参加过我们之前的课程&#xff0c;您将看到许多这样的例子。有时&#xf…...

编程日记 2023/10/8 11:22:01

java Spring Boot RequestHeader设置请求头，当请求头中没有Authorization 直接400问题解决

我在接口中 写了一个接收请求头参数 Authorization 但是目前代理一个问题 那就是 当请求时 请求头中没有这个Authorization 就会直接因为参数不匹配 找不到指向 这里其实很简单 我们设置 value 为我们需要的字段内容 required 是否必填 我们设置为 false 就可以了 这样 没有也…...

编程日记 2023/10/8 11:21:00

[CISCN2019 华北赛区 Day1 Web5]CyberPunk 二次报错注入

buu上 做点 首先就是打开环境 开始信息收集 发现源代码中存在?file 提示我们多半是包含 我原本去试了试 ../../etc/passwd 失败了 直接伪协议上吧 php://filter/readconvert.base64-encode/resourceindex.phpconfirm.phpsearch.phpchange.phpdelete.php 我们通过伪协议全…...

编程日记 2023/10/8 11:19:59

双机并联逆变器自适应虚拟阻抗下垂控制（Droop）策略Simulink仿真模型

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/10/8 11:18:58

8月份，誉天79名学员通过HCIE认证！

八月份&#xff0c;誉天又有79名学员顺利通过了HCIE认证&#xff0c;其中&#xff1a;云计算46人、Datacom14人、云服务8人、存储7人、安全3人、大数据1人。一起祝贺他们吧~...

编程日记 2023/10/8 11:17:57

Quarto 入门教程 (2)：如何使用并编译出不同文档

接着上一期内容&#xff1a;手把手教你使用 Quarto 构建文档 (1)&#xff0c;本文介绍如何使用 Quarto&#xff0c;并编译出文档&#xff08;PDF&#xff0c;MS Word&#xff0c;html&#xff09;等。 安装 根据官方链接&#xff0c;选择适合自己电脑的 Quarto 版本并下载&am…...

编程日记 2023/10/8 11:13:53

【C++设计模式之命令模式:行为型】分析及示例

简介 命令模式是一种行为型设计模式&#xff0c;它将请求封装成一个对象&#xff0c;从而使不同的请求可以被参数化、队列化或记录化。这种模式允许请求的发送者和接收者进行解耦&#xff0c;同时提供更高的灵活性和可扩展性。 描述 命令模式的核心思想是通过命令对象来封装…...

编程日记 2023/10/8 11:11:52

二、Excel VBA 简单使用

Excel VBA 从入门到出门一、Excel VBA 是个啥&#xff1f;二、Excel VBA 简单使用 &#x1f44b;Excel VBA 简单使用 ⚽️1. 如何在Excel中手动编写VBA代码⚽️2. 如何在 Excel 中运行 VBA 代码⚽️3. 如何在Excel中记录VBA代码⚽️4. 如何在Excel中编辑录制的VBA代码⚽️5. 如…...

编程日记 2023/10/8 11:10:51

获取url后面的参数

方式一 final String queryString request.getQueryString(); System.out.println(queryString); //解码 System.out.println(URLDecoder.decode(queryString, StandardCharsets.UTF_8));测试&#xff1a; pageSize25&pageNum1&sort%5B%27id%27%5Ddesc&sort%5B%…...

编程日记 2023/10/8 11:09:49

python入门篇07-数据容器(序列 集合 字典,json初识)基础(下)

全文目录,一步到位 1.前言简介1.1 专栏传送门1.1.1 上文传送门 2. python基础使用2.1 序列2.1.1 序列定义2.1.2 序列参数解释2.1.3 列表list切片2.1.4 元组tuple切片2.1.5 字符串str切片 2.2 集合定义2.2.1 set集合-基本语法2.2.2 set集合-添加元素.add()2.2.3 set集合- 移除元…...

编程日记 2023/10/8 11:04:45

阿里云服务器公网带宽价格表“按固定带宽”计费模式

阿里云服务器公网带宽计费模式按固定带宽”计费多少钱1M&#xff1f;地域不同带宽价格不同&#xff0c;北京、杭州、深圳等大陆地域价格是23元/Mbps每月&#xff0c;中国香港1M带宽价格是30元一个月&#xff0c;美国硅谷是30元一个月&#xff0c;日本东京1M带宽是25元一个月&am…...

编程日记 2023/10/8 11:00:42

MTK的充电方案—PMIC充电

MTK目前有三套充电方案&#xff0c;主要如下&#xff1a; &#xff08;1&#xff09;线性充电——linering charge(PMIC充电&#xff09; 充9停1&#xff0c;充电电流不能太大&#xff0c;目前最大能做到1.2A&#xff1b; &#xff08;2&#xff09;switch charge&#xff08…...

编程日记 2023/10/8 10:59:41

【Overload游戏引擎分析】画场景栅格的Shader分析

Overload引擎地址&#xff1a; GitHub - adriengivry/Overload: 3D Game engine with editor 一、栅格绘制基本原理 Overload Editor启动之后&#xff0c;场景视图中有栅格线&#xff0c;这个在很多软件中都有。刚开始我猜测它应该是通过绘制线实现的。阅读代码发现&#xff0…...

编程日记 2023/10/8 10:58:39

智能化物流管理：全国快递物流查询API的角色与优势

前言 当今社会&#xff0c;物流行业已经成为了国民经济的重要组成部分&#xff0c;而快递物流则是物流行业中的一个重要分支。随着信息技术的不断发展&#xff0c;智能化物流管理正逐渐成为快递物流领域的趋势&#xff0c;而全国快递物流查询API作为其中的一部分&#xff0c;在…...

编程日记 2023/10/8 10:57:38

Spring Boot如何配置CORS支持

Spring Boot如何配置CORS支持 CORS&#xff08;跨源资源共享&#xff09;是一种Web浏览器的安全性功能&#xff0c;用于控制网页上的脚本文件从不同的源加载其他网页资源。在开发现代Web应用程序时&#xff0c;通常需要跨域请求不同的资源&#xff0c;如API服务或其他Web应用程…...

编程日记 2023/10/8 10:56:37

Mybatis 拦截器（Mybatis插件原理）

Mybatis为我们提供了拦截器机制用于插件的开发&#xff0c;使用拦截器可以无侵入的开发Mybatis插件&#xff0c;Mybatis允许我们在SQL执行的过程中进行拦截&#xff0c;提供了以下可供拦截的接口&#xff1a; Executor&#xff1a;执行器ParameterHandler&#xff1a;参数处理…...

编程日记 2023/10/8 10:54:34

AXI总线协议基础--几分钟熟悉通道信号和基础架构

目录 一、AXI协议基础 1.1读写通道的基本架构图 1.2猝发操作举例 1.3传输顺序 二、各个通道中的信号描述 2.1全局信号 2.2写地址通道信号 2.3写数据通道信号 2.4写响应通道信号 2.5读地址通道信号 2.6读数据通道 三、通道握手 3.1单一信息传输时的握手过程 3.2不…...

编程日记 2023/10/8 10:52:33

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2025/11/25 1:24:14

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/9/18 22:35:44

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/11/26 7:06:01

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2025/11/18 1:06:11

WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

编程新知 2025/11/16 22:52:45

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/10/14 9:02:38

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2025/11/23 22:51:58

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...

编程新知 2025/9/18 4:17:51

华为OD最新机试真题-数组组成的最小数字-OD统一考试（B卷）

题目描述 给定一个整型数组，请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3，则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组，0<数组长度<= 100，0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

编程新知 2025/9/21 23:43:15

高考志愿填报管理系统---开发介绍

高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发&#xff0c;采用现代化的Web技术&#xff0c;为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## &#x1f4cb; 系统概述 ### &#x1f3af; 系统定…...

编程新知 2025/11/16 22:31:16