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

【Nodejs】使用Nodejs搭建HTTP服务,并实现公网远程访问

文章目录

  • 前言
  • 1.安装Node.js环境
  • 2.创建node.js服务
  • 3. 访问node.js 服务
  • 4.内网穿透
    • 4.1 安装配置cpolar内网穿透
    • 4.2 创建隧道映射本地端口
  • 5.固定公网地址

转载自内网穿透工具的文章:使用Nodejs搭建HTTP服务,并实现公网远程访问「内网穿透」

前言

Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation(原为 Node.js Foundation,已与 JS Foundation 合并)持有和维护,亦为 Linux 基金会的项目。Node.js 采用 Google 开发的 V8 运行代码,使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能,可优化应用程序的传输量和规模。这些技术通常用于资料密集的即时应用程序。

Node.js 大部分基本模块都用 JavaScript 语言编写。在 Node.js 出现之前,JavaScript 通常作为客户端程序设计语言使用,以JavaScript 写出的程序常在用户的浏览器上运行。Node.js 的出现使 JavaScript 也能用于服务端编程。Node.js 含有一系列内置模块,使得程序可以脱离 Apache HTTP Server 或 IIS,作为独立服务器运,下面将介绍如何简单几步实现远程公共网络下访问windwos node.js的服务端。

1.安装Node.js环境

官网下载node.js,我们选择64位一键安装

https://nodejs.org/zh-cn/download/

image-20230302141011787

安装好后我们打开cmd,输入命令有正常出来版本号,表示安装成功,一键安装版,默认会配置环境变量。

node -v

image-20230302150424377

2.创建node.js服务

这里我们在本地创建一个简单的nodejs服务,创建一个贪吃蛇页面小游戏来进行演示。

首先在本地创建一个文件夹,并在文件夹中新建2个文件,一个是js文件和一个html文件,需要放在同个目录下,然后使用vscode打开。

  • game.html文件
  • nodetest.js文件

image-20230302155043387

game.html添加如下html代码并保存,以下代码是一个html页面小游戏(贪吃蛇)

<!DOCTYPE html>
<html>
<head><title>贪吃蛇</title><meta charset="UTF-8"><meta name="keywords" content="贪吃蛇"><meta name="Description" content="这是一个初学者用来学习的小游戏"><style type="text/css">*{margin:0;}.map{margin:100px auto;height:600px;width:900px;background:#00D0FF;border:10px solid #AFAEB2;border-radius:8px;}</style>
</head><body>
<div class="map">
<canvas id="canvas" height="600" width="900"></canvas>
</div><script type="text/javascript">//获取绘制工具/*var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");//获取上下文ctx.moveTo(0,0);ctx.lineTo(450,450);*/var c=document.getElementById("canvas");var ctx=c.getContext("2d");/*ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(450,450);ctx.stroke();*/var snake =[];//定义一条蛇,画蛇的身体var snakeCount = 6;//初始化蛇的长度var foodx =0;var foody =0;var togo =0;function drawtable()//画地图的函数{for(var i=0;i<60;i++)//画竖线{ctx.strokeStyle="black";ctx.beginPath();ctx.moveTo(15*i,0);ctx.lineTo(15*i,600);ctx.closePath();ctx.stroke();}for(var j=0;j<40;j++)//画横线{ctx.strokeStyle="black";ctx.beginPath();ctx.moveTo(0,15*j);ctx.lineTo(900,15*j);ctx.closePath();ctx.stroke();}for(var k=0;k<snakeCount;k++)//画蛇的身体{ctx.fillStyle="#000";if (k==snakeCount-1){ctx.fillStyle="red";//蛇头的颜色与身体区分开}ctx.fillRect(snake[k].x,snake[k].y,15,15);//前两个数是矩形的起始坐标,后两个数是矩形的长宽。}//绘制食物	ctx.fillStyle ="black";ctx.fillRect(foodx,foody,15,15);ctx.fill();}function start()//定义蛇的坐标{//var snake =[];//定义一条蛇,画蛇的身体//var snakeCount = 6;//初始化蛇的长度for(var k=0;k<snakeCount;k++){snake[k]={x:k*15,y:0};}drawtable();addfood();//在start中调用添加食物函数}function addfood(){foodx = Math.floor(Math.random()*60)*15; //随机产生一个0-1之间的数foody = Math.floor(Math.random()*40)*15;for (var k=0;k<snake;k++){if (foodx==snake[k].x&&foody==sanke[k].y)//防止产生的随机食物落在蛇身上{	addfood();}}}	function move(){switch (togo){case 1: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y}); break;//向左走case 2: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15}); break;case 3: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y}); break;case 4: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y+15}); break;case 5: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y-15}); break;case 6: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y+15}); break;default: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y});}snake.shift();//删除数组第一个元素ctx.clearRect(0,0,900,600);//清除画布重新绘制isEat();isDead();drawtable();} 			function keydown(e){switch(e.keyCode){case 37: togo=1; break;case 38: togo=2; break;case 39: togo=3; break;case 40: togo=4; break;case 65: togo=5; break;case 68: togo=6; break;}}function isEat()//吃到食物后长度加1{if(snake[snakeCount-1].x==foodx&&snake[snakeCount-1].y==foody){addfood();snakeCount++;snake.unshift({x:-15,y:-15});}}//死亡函数function isDead(){if (snake[snakeCount-1].x>885||snake[snakeCount-1].y>585||snake[snakeCount-1].x<0||snake[snakeCount-1].y<0){window.location.reload();}}document.onkeydown=function(e)
{keydown(e);} 
window.onload = function()//调用函数
{ start();setInterval(move,150);drawtable();}
</script>
</body>
</html>

nodetest.js文件添加如下js代码,以下代码意思是开启一个http服务,设置监听3000端口号

const http = require('http');//加载文件模块
const fs = require("fs");const hostname = '127.0.0.1';
//端口
const port = 3000;const server = http.createServer((req, res) => {res.statusCode = 200;res.setHeader('Content-Type', 'text/html');fs.readFile('./game.html', (err, data) => {if (err) throw err;console.log(data.toString);res.end(data);});});server.listen(port, hostname, () => {console.log(`Server running at http://${hostname}:${port}/`);
});

3. 访问node.js 服务

当我们编写好相关代码后,我们开始启动服务.在vscode控制台输入命令【注意需要进入到相应的文件目录下执行命令】

node .\nodetest.js

image-20230302170633966

有正常返回提示服务在本地3000端口下,我们打开浏览器,访问http://127.0.0.1:3000/,出现贪吃蛇界面表示成功【游戏控制:键盘上下左右键】

image-20230302171105342

4.内网穿透

这里我们使用cpolar来进行内网穿透,支持http/https/tcp协议,不限制流量,无需公网IP,也不用设置路由器,使用简单。

4.1 安装配置cpolar内网穿透

cpolar官网:https://www.cpolar.com/

访问cpolar官网,注册一个账号,然后下载并安装客户端,具体安装教程可以参考官网文档教程。

  • windows系统:在官网下载安装包后,双击安装包一路默认安装即可。
  • linux系统:支持一键自动安装脚本,详细请参考官网文档——入门指南

20230130105715

4.2 创建隧道映射本地端口

cpolar安装成功后,在浏览器上访问本地9200端口http://localhost:9200,使用cpolar邮箱账号登录。

20230130105810

点击左侧仪表盘的隧道管理——创建隧道,创建一个指向本地3000端口的http隧道

  • 隧道名称:可自定义命名,注意不要与已有的隧道名称重复
  • 协议:选择http
  • 本地地址:3000
  • 域名类型:免费选择随机域名
  • 地区:选择China vip

点击创建

image-20230302171633772

隧道创建成功后,点击左侧的状态——在线隧道列表,查看所生成的公网地址,然后复制地址

image-20230302171740715

打开浏览器器,我们使用上面公网地址进行访问,至此,我们成功将本地·node.js 服务发布到了公网地址

image-20230302171817498

5.固定公网地址

由于以上使用cpolar所创建的隧道使用的是随机公网地址,24小时内会随机变化,不利于长期远程访问。因此我们可以为其配置二级子域名,该地址为固定地址,不会随机变化。

  • 保留一个二级子域名

登录cpolar官网,点击左侧的预留,选择保留二级子域名,设置一个二级子域名名称,点击保留,保留成功后复制保留的二级子域名名称

image-20230302172317079

保留成功后复制保留的二级子域名地址

image-20230302172454064

  • 配置二级子域名

访问http://127.0.0.1:9200/,登录cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的3000隧道,点击右侧的编辑

image-20230302172856768

修改隧道信息,将保留成功的二级子域名配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名

点击更新

image-20230302172806823

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了保留过的二级子域名名称,将其复制下来

image-20230302172935943

然后使用固定http地址打开浏览器访问

image-20230302173012863
访问成功,现在这个公网地址是固定的了,不会随机变化。成功通过cpolar内网穿透,实现在外远程访问nodejs服务,无需公网IP ,也不用设置路由器。

相关文章:

【Nodejs】使用Nodejs搭建HTTP服务,并实现公网远程访问

文章目录 前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5.固定公网地址 转载自内网穿透工具的文章&#xff1a;使用Nodejs搭建HTTP服务&#xff0c;并实现公网远程访问「内网穿透」 前言 Node.js…...

面试题之介绍自己测试的项目,担任的角色和做出的成果

在测试面试过程中&#xff0c;面试官想要了解一个同学对项目的掌握程度或一些例如沟通总结的软技能情况&#xff0c;该怎么考察呢&#xff1f; 一个具有代表性的题目来了&#xff1a;简单介绍一下自己测试的项目,担任的角色和做出的成果。 一、面试官角度 1、考察是否真正做过该…...

HTB靶机012-Valentine-WP

012-Valentine 靶机IP&#xff1a;10.10.10.79 Scan nmap端口扫描&#xff1a; ┌──(xavier㉿kali)-[~] └─$ sudo nmap -sSV -T4 10.10.10.79 -F Starting Nmap 7.93 ( https://nmap.org ) at 2023-04-29 00:47 CST Nmap scan report for 10.10.10.79 Host is up (0.30s…...

微信小程序nodejs+vue社区居民健康服务系统uniapp

系统分为社区居民&#xff0c;管理员&#xff0c;县区工作员&#xff0c;社区工作员三个角色 县区工作员的主要功能&#xff1a; 1.对社区的工作人员进行添加&#xff0c;修改&#xff0c;删除&#xff0c;查询 2.疫情专栏的信息进行添加&#xff0c;修改&#xff0c;删除&…...

尝试探索水下目标检测,基于yolov5轻量级系列模型n/s/m开发构建海底生物检测系统

其实&#xff0c;水下目标检测相关的项目早在之前就已经做了几个了&#xff0c;但是没有系统性地对比过&#xff0c;感兴趣的话可以先看下之前的文章&#xff0c;如下&#xff1a; 《基于自建数据集【海底生物检测】使用YOLOv5-v6.1/2版本构建目标检测模型超详细教程》 《基于…...

大数据Doris(二十四):Doris数据Insert Into导入方式介绍

文章目录 Doris数据Insert Into导入方式介绍 一、语法及参数 二、案例 三、注意事项 1、关于插入数据量 2、关于insert操作返回结果 3、关于导入任务超时 4、关于Session变量 5、关于数据导入错误 Doris数据Insert Into导入方式介绍 Doris 提供多种数据导入方案&…...

macOS Ventura 13.5beta (22G5027e)发布

系统介绍 黑果魏叔 5 月 20 日消息&#xff0c;苹果今日向 Mac 电脑用户推送了 macOS 13.5 开发者预览版 Beta 更新&#xff08;内部版本号&#xff1a;22G5027e&#xff09;&#xff0c;本次更新距离上次发布隔了 17 天。 macOS Ventura 带来了台前调度、连续互通相机、Face…...

基于SpringBoot的财务管理系统的设计与实现

背景 财务管理系统能够通过互联网得到广泛的、全面的宣传&#xff0c;让尽可能多的员工了解和熟知财务管理系统的便捷高效&#xff0c;为管理者和员工提供了服务&#xff0c;节省人力、物力和时间&#xff0c;提高工作效率。 系统设计 为了更好的去理清本系统整体思路&#…...

使用OpenCV进行肺炎诊断检测

肺炎是一种由感染引起的严重呼吸道疾病&#xff0c;特别是在高危人群中&#xff0c;可能会出现危及生命的并发症。必须尽快诊断和治疗肺炎&#xff0c;以最大限度地提高患者康复的机会。 诊断过程并不容易&#xff0c;需要一些医学实验室工具和先进的医疗技能&#xff0c;但我们…...

北华大学第九届程序设计竞赛 题解

5.14和队友VP一场&#xff0c;第二次VP&#xff0c;状态明显比第一次好很多&#xff0c;总共A了7题&#xff0c;基本是能做出来的都做出来了&#xff0c;最后还剩下接近2小时的时间。。。。。 A "北华"有几何 思路&#xff1a;数图片中“北华”的数量&#xff0c;直…...

【Java算法题】剑指offer_01数据结构

前言 刷题链接&#xff1a; https://www.nowcoder.com/exam/oj/ta?page2&tpId13&type265 1. 链表 JZ24 反转链表 思路&#xff1a;基本操作&#xff0c;如下所示。 /* public class ListNode {int val;ListNode next null;ListNode(int val) {this.val val;} }…...

最简单配置jenkins容器使用宿主机的docker方法

构建镜像和发布镜像到harbor都需要使用到docker命令。而在Jenkins容器内部安装Docker官方推荐直接采用宿主机带的Docker即可 设置Jenkins容器使用宿主机Docker 设置宿主机docker.sock权限 chown root:root /var/run/docker.sock chmod orw /var/run/docker.sock 添加数据卷 v…...

Android aidl及binder基础知识巩固

作者&#xff1a;义华 1、什么是binder binder是android framework提供的&#xff0c;用于跨进程方法调用的机制&#xff0c;具有安全高效等特点。 我们知道&#xff0c;在 Android 系统中&#xff0c;每个应用程序都运行在一个独立的进程中&#xff0c;各个进程之间需要进行…...

[日记]LeetCode算法·二十五——二叉树⑤ AVL树(插入+删除)附代码实现

本章的代码实现基于上一篇BST与优先队列的基类进行平衡二叉树&#xff0c;即AVL树。 文章目录 AVL的概念AVL查询效率AVL的插入1.插入节点2.更新平衡因子BF3.旋转调整树的结构3.1 LL 右旋3.2 RR 左旋3.3 LR 左右双旋3.4 RL 右左双旋 4 插入总结 AVL的删除1.寻找删除节点2.更新平…...

flink-1.13.6 例子

-------------------------------------------------------------- flink版本: flink-1.13.6 [rootmaster bin]# pip3 list | grep flink WARNING: Ignoring invalid distribution -andas (/usr/local/python38/lib/python3.8/site-packages) apache-flink 1.13.0 a…...

Go语音基于zap的日志封装

zap日志封装 Zap是一个高性能、结构化日志库&#xff0c;专为Go语言设计。它由Uber开源&#xff0c;并且在Go社区中非常受欢迎。它的设计目标是提供一个简单易用、高效稳定、灵活可扩展的日志系统。 以下是Zap的一些主要特点&#xff1a; 1.高性能&#xff1a;Zap的性能非常出…...

可持续能源技术具有改变世界的潜力,并且已经在多个方面展现出积极的影响。

可持续能源技术的发展在当今全球面临的气候变化和能源安全挑战中扮演着至关重要的角色。我认为可持续能源技术具有改变世界的潜力&#xff0c;并且已经在多个方面展现出积极的影响。以下是我对此的观点&#xff1a; 1&#xff0c;可持续能源技术有助于减少对化石燃料的依赖 化…...

Java常用工具之StringUtils类

目录 一、字符串判空二、分隔字符串三、判断是否为纯数字四、将集合拼接成字符串五、其他方法 字符串&#xff08;String&#xff09;在我们的日常工作中&#xff0c;用得非常非常非常多。 在我们的代码中经常需要对字符串判空&#xff0c;截取字符串、转换大小写、分隔字符串、…...

MyBatis-plus的批量插入方式对比分析

MyBatis-plus的批量插入方式对比分析 【摘要】Mybatis批量插入一直是开发者重点关注的问题&#xff0c;本文列举了Mybatis的五种插入方式进行对比分析&#xff0c;验证了五种批量插入的方式的优先级。 1 准备工作 1.1 新建spring项目 略。 1.2 导入pom.xml依赖 <depende…...

【系分论文】论软件开发模型及应用

目录 论题论题介绍论文要点理论素材准备范文摘要正文 论文补充知识 论题 论软件开发模型及应用 论题介绍 软件开发模型&#xff08; Software Development Model&#xff09;是指软件开发全部过程、活动和任务的结构框架。软件开发过程包括需求、设计、编码和测试等阶段&…...

智慧无人机巡检-无人机可见光红外数据集 无人机多模态检测数据集 红外与可见光检测数据集

智慧无人机巡检-无人机可见光红外数据集&#xff0c;已完成标注&#xff0c;可导出各种常用数据集&#xff0c;yolo&#xff0c;voc&#xff0c;coco等格式。可见光33000张&#xff0c;红外16100张&#xff0c;目标一张一个 无人机可见光红外目标数据集项目详细信息数据集名称无…...

对比 Token Plan 与按量计费在 Taotoken 平台上的成本体感差异

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 对比 Token Plan 与按量计费在 Taotoken 平台上的成本体感差异 对于个人开发者或项目管理者而言&#xff0c;在接入大模型服务时&a…...

毕业设计 yolov11骨折检测医疗辅助系统(源码+论文)

文章目录 0 前言1 项目运行效果2 课题背景2.1 研究背景2.2 国内外研究现状2.3 研究意义 3 设计框架&#xff08;骨折检测系统设计框架说明&#xff09;3.1. 系统架构图3.2. 技术选型3.2.1 核心组件3.2.2 辅助工具 3.3. 核心模块设计3.3.1 YOLO模型训练模块训练流程图关键伪代码…...

多智能体谈判系统:Agent 如何通过博弈达成最优交易价格?

多智能体谈判系统&#xff1a;Agent 如何通过博弈达成最优交易价格&#xff1f;关键词 多智能体系统、自动谈判、博弈论、纳什均衡、帕累托最优、双边/多边谈判、强化学习谈判、动态定价 摘要 想象一个没有人类中介的世界&#xff1a;电商平台上的智能客服自动和批发商砍价、供…...

别再只用递归了!用C语言栈实现非递归快速排序,内存效率提升实战

从递归到迭代&#xff1a;C语言栈实现非递归快速排序的工程实践 在嵌入式开发和大规模数据处理场景中&#xff0c;递归实现的快速排序常常面临栈溢出风险。当排序10万个元素的数组时&#xff0c;递归深度可能达到log₂100000≈17层&#xff0c;在仅有2KB栈空间的STM32F103上极易…...

三步让小爱音箱秒变AI语音助手:MiGPT深度配置指南

三步让小爱音箱秒变AI语音助手&#xff1a;MiGPT深度配置指南 【免费下载链接】mi-gpt &#x1f3e0; 将小爱音箱接入 ChatGPT 和豆包&#xff0c;改造成你的专属语音助手。 项目地址: https://gitcode.com/GitHub_Trending/mi/mi-gpt 还在为小爱音箱的"人工智障&q…...

学习日志(三)【php语法学习,iscc校赛wp】

1. 任务 1.1.1.1.1.1. 知识部分 rce看【之前的笔记&#xff1f;】php的知识点学习继续jwt token好像是比赛的题目考察内容&#xff0c;我看看php伪协议 1.1.1.1.1.2. 题目 参加iscc比赛【五一】rce题目 1.1.1.1.1.3. 环境配置 把vscode搞好&#xff0c;上学期没有把Php配…...

PrivacyGuard实战:基于实证差分隐私的机器学习模型隐私审计框架

1. 项目概述与核心价值在过去的几年里&#xff0c;我亲眼见证了机器学习模型从实验室走向银行、医疗、社交网络等各个敏感领域的全过程。模型性能的每一次飞跃都令人兴奋&#xff0c;但随之而来的隐私泄露事件也一次次为我们敲响警钟。一个在医疗数据上训练出的诊断模型&#x…...

LeagueAkari:基于LCU接口的英雄联盟客户端自动化工具深度解析

LeagueAkari&#xff1a;基于LCU接口的英雄联盟客户端自动化工具深度解析 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 功能模块架构与核心技…...

从XAI到HXAI:构建以人为中心的可解释AI框架与实践

1. 项目概述&#xff1a;从“黑箱”到“白盒”&#xff0c;构建可信AI的演进之路在机器学习项目里摸爬滚打了十几年&#xff0c;我见过太多因为模型“说不清道不明”而引发的信任危机。一个在测试集上表现完美的信用评分模型&#xff0c;可能因为无法向风控专家解释“为什么拒绝…...