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

如何搭建一个 websocket

环境:

  • 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…...

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版本号我们在安装第三方库时可…...

[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 安装…...

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

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

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

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

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

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

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

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

8月份,誉天79名学员通过HCIE认证!

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

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

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

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

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

二、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. 如…...

获取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%…...

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集合- 移除元…...

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

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

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…...

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

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

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

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

Spring Boot如何配置CORS支持

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

Mybatis 拦截器(Mybatis插件原理)

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

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

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

matlab数学建模方法与实践 笔记汇总

matlab数学建模方法与实践 笔记汇总 写在最前面笔记1&#xff1a;快速入门1.导入数据2.数据探索3.多项式拟合4.发布功能5.数据类型6、全部代码 笔记2&#xff1a;数据的准备1.数据的读取与写入excel、txt读图读视频 2.数据预处理缺失值噪声过滤数据归约数据变换 3.数据统计4.数…...

[UE虚幻引擎] DTCopyFile 插件说明 – 使用蓝图拷贝复制文件 (Windows)

本插件可以在虚幻引擎中使用蓝图对系统的其他文件进行拷贝复制操作。 1. 节点说明 Async Copy File ​ 异步复制文件 Param Source File : 要复制的源文件的完整路径。Param Target File : 要复制的目标文件的完整路径。Param Force Copy : 如果为true&#xff0c;则如果目标…...

如何用ChatGPT学或教英文?5个使用ChatGPT的应用场景!

原文&#xff1a;百度安全验证 AI工具ChatGPT的出现大幅改变许多领域的运作方式&#xff0c;就连「学英文」也不例外&#xff01;我发现ChatGPT应用在英语的学习与教学上非常有意思。 究竟ChatGPT如何改变英文学习者(学生)与教学者(老师)呢&#xff1f; 有5个应用场景我感到…...

基于spirngboot人事考勤管理信息系统

一&#xff1a;功能介绍 本系统前端采用vue框架以及Elemnt-UI,后端采用springboot、mysql、redis、mybatis等技术栈。 主要功能有登录、员工考勤、数据统计、薪资管理、权限管理、打卡管理、考勤审核、请假审批、薪资发放、报表统计、文件上传、文件下载、考勤设置、请假设置。…...

QT界面窗口 (widget)的显示和隐藏,关闭

QT界面窗口的显示和隐藏,关闭_qt窗口隐藏关闭按钮_123无敌&#xff0c;就你了的博客-CSDN博客...

这7个AI软件让设计效率飞起,快来收藏 优漫动游

伴随着AI技术的发展&#xff0c;设计师使用AI工具来提高工作效率已成为一种趋势&#xff0c;越来越多的AI工具也出现在市场上。本文收集了市场上7个好用的AI工具推荐给大家&#xff0c;一起来看看吧&#xff01; 这7个AI软件让设计效率飞起&#xff0c;快来收藏 1、即时AI…...

ElasticSearch环境准备

Elasticsearch 是一个基于 Apache Lucene™ 的开源搜索引擎。不仅仅是一个全文搜索引擎&#xff0c;它还是一个分布式的搜索和分析引擎&#xff0c;可扩展并能够实时处理大数据。以下是关于 Elasticsearch 的一些主要特点和说明&#xff1a; 1.实时分析&#xff1a;Elasticsear…...

JAVA练习百题之数组插入元素

题目&#xff1a;有一个已经排好序的数组。现输入一个数&#xff0c;要求按原来的规律将它插入数组中。 程序分析 要将一个数插入已经排好序的数组中&#xff0c;我们可以采用以下步骤&#xff1a; 遍历数组&#xff0c;找到第一个大于待插入数的位置。将待插入数插入到该位…...

C++11常见语法

目录 lambda 表达式 可变模板参数 C11新类的默认函数 包装器 function bind lambda 表达式 lambda 表达式也是可调用对象&#xff0c;在C语言中就有函数指针&#xff0c;但是函数指针比较复杂。 而在C11之前&#xff0c;也有仿函数&#xff0c;使用仿函数&#xff0c;还…...

【数据分析】时间序列

UTC时间&#xff1a;时间戳是以格林威治时间1970年01月01日00时00分00秒为基准计算所经过时间的秒数&#xff0c;是一个浮点数。Python的内置模块time和datetime都可以对时间格式数据进行转换&#xff0c;如时间戳和时间字符串的相互转换。 报错记录&#xff1a;AR has been re…...

猪八戒网做网站/seo百科大全

目前很多制造型企业开始进行数字化转型&#xff0c;嫁接了很多提高生产效率的设备&#xff0c;比如MES、ERP、SPC等系统。 这些数据能帮助企业看到当下正在发什么&#xff0c;比如在制品多少&#xff1f;库存多少&#xff1f;损耗多少&#xff1f;但是不能告诉企业为什么会形成…...

移动网站建设哪家好/免费数据分析网站

//程序存在bug&#xff0c;会不断占用内存直到死机//是malloc函数的问题/**************************************************** 文件名&#xff1a;pthread_server.c* 文件描述&#xff1a;创建子线程来接收客户端的数据***************************************************…...

微信开放平台是什么/常熟seo网站优化软件

1.请列举出在 JDK 中几个常用的设计模式&#xff1f; 单例模式&#xff08;Singleton pattern&#xff09;用于 Runtime&#xff0c;Calendar 和其他的一些类中。工厂模式&#xff08;Factory pattern&#xff09;被用于各种不可变的类如 Boolean&#xff0c;像 Boolean.value…...

网站服务器是网站的空间吗/推广网站排名

前言 Apollo是携程框架部门研发的开源配置管理中心&#xff0c;能够集中化管理应用不同环境、不同集群的配置&#xff0c;配置修改后能够实时推送到应用端。本文介绍了配置的概念、配置中心的必要性以及Apollo的特点&#xff0c;着重拆解分析Apollo客户端的设计原理&#xff0c…...

河北建设厅官方网站电话/制作网页多少钱

原帖&#xff1a;http://3dmgame.chnren.com/bbs/showtopic-604395.html 这个是标题&#xff0c;因为去年开始做的时候就采用了这张图做标题&#xff0c;所以最终版也没有更换&#xff0c;只是修饰了一下呵呵。游戏名称&#xff1a;萝莉的远征RPG1ST银色幻境版本信息&#xff1…...

制作器/抖音优化排名

ID&#xff1a;fuchen1994 姓名&#xff1a;江军 作业要求&#xff1a; 理解Linux系统中进程调度的时机&#xff0c;可以在内核代码中搜索schedule()函数&#xff0c;看都是哪里调用了schedule()&#xff0c;判断我们课程内容中的总结是否准确&#xff1b; 使用gdb跟踪分析一…...