Nodejs快速搭建简单的HTTP服务器,并发布公网远程访问

news2024/9/23 1:41:09

文章目录

  • 前言
  • 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 ,也不用设置路由器。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/452977.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

链表篇总结

移除链表元素&#xff1a; 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 思路&#xff1a; 这里以链表 1 4 2 4 来举例&#xff0c;移除元素4。 那么因为单链表的特殊性&#xff0c;只…

远程桌面连接不上是什么原因?怎么解决

如何解决远程桌面连接不上的问题&#xff1f; 远程桌面是一种非常方便的远程访问工具&#xff0c;允许用户在不同的地方通过网络访问其他计算机的桌面界面。但有时你可能会遇到远程桌面无法连接的问题。此时&#xff0c;您需要采取一些措施来解决这个问题。在本文中&#xff0…

走进小程序【十一】微信小程序【使用Echarts 和 腾讯地图】

文章目录 &#x1f31f;前言&#x1f31f;效果展示&#x1f31f;使用Echarts&#x1f31f;Echarts官网&#x1f31f;体验示例小程序&#x1f31f;下载&#x1f31f;引入组件&#x1f31f;创建图表&#x1f31f;暂不支持的功能 &#x1f31f;使用地图&#x1f31f;map组件&#…

Visual Studio 2019/2017/2015官方安装教程

安装VisualStudio找不到官方版本&#xff1f;只能找到第三方&#xff1f;害怕中毒&#xff1f; 不要急&#xff0c;本文例举了VS 2019 2017 2015的官方位置&#xff0c;不用但心装成第三方Visual Studio 百度搜索 Visual Studio 2017&#xff0c;只有第三方的包&#xff0c;而…

Network 之八 详解 MAC 地址、MAC 协议、MAC 控制器

在网络通信中&#xff0c;MAC 一词应用非常广泛&#xff0c;可以指 MAC 协议&#xff0c;也可以指 MAC 控制器&#xff0c;还用来表示 MAC 地址&#xff0c;因此&#xff0c;今天就来系统学习一下网络通信中 MAC 相关的知识。 MAC 协议 MAC&#xff08;Media Access Control&a…

宝安日报:联诚发跨界创新“追光”十九载!

世界一流声光电智造一体化服务商、国家级高新技术企业、国家级专精特新“小巨人”企业、博士后创新实践基地、深圳自主创新百强企业……这些熠熠生辉的关键词&#xff0c;是位于宝安区航城街道的深圳市联诚发科技股份有限公司&#xff08;以下简称&#xff1a;联诚发&#xff0…

Hbase简介

HBase简介 一、HBase简介 1. HBase简介 (1) apache的顶级项目&#xff0c;hadoop的数据库&#xff0c;分布式、大规模的大数据存储。 HBase是Google的BigTable的开源java版本&#xff0c;建立在hdfs之上的&#xff0c;分布式、列存储、非关系&#xff08;nosql、key-value&a…

MySQL(复合查询)

文章目录 0 前言1 基本查询2 多表查询3 自连接4 子查询4.1 单行子查询4.2 多行子查询4.3 多列子查询4.4 在from子句中使用子查询4.5 合并查询4.5.1 union4.5.3 union all 0 前言 相关内容已经准备好了 链接&#xff1a;https://gitee.com/ding-xushengyun/linux__cpp/blob/ma…

2023/4/23周报

目录 摘要 论文阅读 1、标题和现存问题 2、矩阵分解&#xff08;MF&#xff09;和图神经网络 3、GNN_MF框架 4、项目聚集和社会聚集 5、实验准备和结果 2、深度学习 1、GCN 2、代码实例 总结 摘要 本周在论文阅读上&#xff0c;阅读了一篇基于GNN的矩阵分解推荐算法…

【机器学习】 多维kd-tree的python实现

一、说明 本篇主要介绍一个用python实现kd-tree的代码&#xff0c;以及围绕代码实现的kd-tree原理。期望能够为读者打开另一个视角&#xff0c;看待kd-tree的好处。 二、什么是K维树&#xff1f; K-D 树&#xff08;也称为 K 维树&#xff09;是一种二叉搜索树&#xff0c;其中…

甘蔗种植成本居高不下 培育良种和提高机械化覆盖率或成行业破局关键

一、甘蔗种植行业概述及分类 甘蔗是一种重要的经济农作物&#xff0c;是世界上最重要的糖料作物及较有发展潜力的可再生能源作物&#xff0c;现广泛种植于热带及亚热带地区&#xff0c;最大的甘蔗生产国是巴西、印度和中国。 根据观研报告网发布的《中国甘蔗种植市场发展态势分…

matlab 点云滤波(中值、均值、高斯滤波)代码

点云中值、均值、高斯滤波 介绍一下滤波函数 smoothdata: 对含噪数据进行平滑处理 B smoothdata(___,method) 为上述任一语法指定平滑处理方法。例如&#xff0c;B smoothdata(A,sgolay) 使用 Savitzky-golay 滤波器对 A 中的数据进行平滑处理。Method-平滑处理方法 "…

java实现修改excel中数据格式

目录 背景&#xff1a;过程&#xff1a;方案&#xff1a;个人想法&#xff1a;总结&#xff1a;1、清楚边界&#xff0c;全局观2、工欲善其事&#xff0c;必先利其器3、别总想着改源码&#xff0c;别总觉得自己做不出来&#xff0c;要给自己积极的心理暗示。有用。 背景&#x…

基于深度强化学习训练《街头霸王·二:冠军特别版》通关关底 BOSS -智能 AI 代理项目上手

文章目录 SFighterAI项目简介实现软件环境项目文件结构 运行指南环境配置验证及调整gym环境&#xff1a; gym-retro 游戏文件夹错误提示及解决Could not initialize NNPACK!错误提示&#xff1a;libGL error: MESA-LOADER: failed to open swrast 运行测试训练模型查看曲线 Tip…

《Redis设计与开发》读书笔记

《Redis设计与实现》读书笔记 简单动态字符串 SDS的定义 结构&#xff1a; buf数组&#xff1a;用于保存字符串 len属性&#xff1a;记录SDS中保存字符串的长度 free属性&#xff1a;记录buf中未使用字节数量 遵循C字符串以空字符串结尾的惯例&#xff0c;保存空字符串的…

默认成员函数之构造函数,构造函数的特点,创建,调用与对象创建的一语双关,默认构造函数等

内置类型与自定义类型 C当中的类型的话分为两类&#xff1a;一种就是内置类型/基本类型&#xff0c;就是c语言自带的那些类型基本类型&#xff0c;如int, char, double, 指针&#xff08;任何类型的指针&#xff0c;因为指针就是地址嘛&#xff09;等等&#xff1b;还有就是自…

某安全对抗行走APP逆向分析

1.定位url 抓包: https://api5.xxxx.com/xxx-rest-service/message/fun_getnearby 看一下参数: opentime:时间戳 reqdata:base64编码 sign 未知,需要解密 # -*- coding: utf-8 -*- # @Author : Codeooo # @Time : 2022-10-14import frida, sysm199a = "&qu…

learn_C_deep_5 (语句和表达式的概念、if语句的多种语法结构、C语言有没有布尔类型、“零值”的比较)

目录 语句和表达式的概念 if语句的多种语法结构 注释的便捷方法&#xff08;环境vs&#xff09; if语句执行的过程 逻辑与&& 逻辑或|| 运算关系的顺序 ​编辑 C语言有没有布尔类型 C99标准 sizeof(bool)的值为多少&#xff1f; _Bool原码 BOOL、TRUE、…

IT_开发提测标准规范

背景 公司 IT 规模小&#xff0c;开发提测质量差&#xff0c;流程不规范&#xff0c;导致测试任务重&#xff0c;于是推行 &#xff1a;IT_开发提测标准规范&#xff0c;正文如下&#xff1b;拟定开发提测标准规范后&#xff0c;测试与项目经理内部评审后&#xff0c;发至IT群…

低相位噪声链路调试分析

上图为原始状态,与项目结项评审指标差不多,确实存在几个噪声比较差的点。 频率分布大约在几Hz,20K,50K左右。 由于测试时由子卡进行输出,采用直接进行直接输出,以看出,明显的尖峰已经没有了,只剩下20K左右的尖峰,但是总体来说,效果很差,可能时单端输出的问题。试…