記事ディレクトリ
序文
Node.js は、サーバー側で JavaScript を実行するためのオープンソースのクロスプラットフォーム ランタイム環境です。Node.js は OpenJS Foundation (以前は Node.js Foundation、JS Foundation と合併しました) によって所有および維持されており、Linux Foundation のプロジェクトでもあります。Node.js は、Google が開発した V8 実行コードを使用し、イベント駆動型、ノンブロッキング、非同期入出力モデルなどのテクノロジーを使用して、パフォーマンスを向上させ、アプリケーションの送信量と規模を最適化します。これらの手法は通常、データ集約型のリアルタイム アプリケーションで使用されます。
Node.js の基本モジュールのほとんどは JavaScript 言語で書かれています。Node.js が登場する前は、JavaScript がクライアント側のプログラミング言語として通常使用され、JavaScript で書かれたプログラムはユーザーのブラウザ上で実行されることがよくありました。Node.js の登場により、JavaScript をサーバーサイド プログラミングに使用できるようになります。Node.js には、プログラムを Apache HTTP サーバーまたは IIS から分離し、独立したサーバーとして実行できるようにする一連の組み込みモジュールが含まれています。以下では、リモート パブリック ネットワーク下の Windwos Node.js サーバーにアクセスする方法を紹介します。いくつかの簡単な手順。
1.Node.js環境をインストールする
公式Webサイトからnode.jsをダウンロードします。64ビットのワンクリックインストールを選択します。
インストール後、cmd を開き、コマンドを入力すると、バージョン番号が通常どおり表示され、インストールが成功したことがわかります。ワンクリック インストール バージョンでは、デフォルトで環境変数が設定されます。
node -v
2.node.jsサービスを作成する
ここでは、単純な Nodejs サービスをローカルに作成し、デモンストレーション用のスネーク ページ ゲームを作成します。
まずローカルにフォルダーを作成し、そのフォルダー内にjsファイルとhtmlファイルの 2 つの新しいファイルを作成し、同じディレクトリに配置して vscode で開きます。
game.html文件nodetest.js文件
game.html次のコードを追加してhtml保存します。次のコードは HTML ページ ゲーム (Snake) です。
<!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.jsjsファイルに次のコードを追加します。次のコードは、ファイルを開いて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
ローカル ポート 3000 には通常のリターン プロンプト サービスがあります。ブラウザを開いて http://127.0.0.1:3000/ にアクセスします。スネーク インターフェイスが成功を示しているように見えます [ゲーム コントロール: キーボードの上下左右のキー] ]
4.イントラネットの浸透
ここでは、イントラネットの侵入に cpolar を使用しますが、これは http/https/tcp プロトコルをサポートし、トラフィックを制限せず、パブリック IP アドレスを必要とせず、ルーターの設定も必要とせず、使い方が簡単です。
4.1 cpolar イントラネットペネトレーションのインストールと構成
cpolar公式サイト： https: //www.cpolar.com/
cpolar 公式 Web サイトにアクセスし、アカウントを登録し、クライアントをダウンロードしてインストールします。具体的なインストール手順については、公式 Web サイトのドキュメント チュートリアルを参照してください。
- Windows システム: 公式 Web サイトからインストール パッケージをダウンロードした後、インストール パッケージをダブルクリックしてデフォルトでインストールします。
- Linux システム: ワンクリック自動インストール スクリプトをサポート 詳細については、公式 Web サイトのドキュメント -スタート ガイドを参照してください。
4.2 トンネルマッピングローカルポートの作成
cpolar が正常にインストールされたら、ブラウザーでローカル 9200 ポート http://localhost:9200 にアクセスし、cpolar 電子メール アカウントを使用してログインします。
左側のダッシュボードで「トンネル管理 - トンネルの作成」をクリックして、ローカル ポート 3000 を指す http トンネルを作成します。
- トンネル名: 名前はカスタマイズできますが、既存のトンネル名と重複しないように注意してください。
- プロトコル: http を選択します
- ローカルアドレス: 3000
- ドメイン名のタイプ: 無料でランダムなドメイン名を選択します
- 地域: 中国vipを選択
クリック创建
トンネルが正常に作成されたら、左側の [ステータス - オンライン トンネル リスト] をクリックし、生成されたパブリック ネットワーク アドレスを表示し、アドレスをコピーします。
ブラウザを開き、上記のパブリック アドレスを使用してアクセスすると、この時点でローカルnode.jsサービスがパブリック アドレスに正常に公開されました。
5. 固定パブリックネットワークアドレス
上記の cpolar を使用して作成されたトンネルはランダムなパブリック ネットワーク アドレスを使用するため、24 時間以内にランダムに変更され、長期的なリモート アクセスには適していません。したがって、第 2 レベルのサブドメイン名を設定できます。このアドレスは固定アドレスであり、ランダムに変更されることはありません。
- 第 2 レベルのサブドメインを予約する
cpolar 公式 Web サイトにログインし、左側の「予約」をクリックして、第 2 レベルのサブドメイン名を予約することを選択し、第 2 レベルのサブドメイン名を設定して「予約」をクリックし、予約が成功したら予約した第 2 レベルのサブドメイン名をコピーします。
予約が成功したら、予約した第 2 レベルのサブドメイン名のアドレスをコピーします。
- 第 2 レベルのサブドメイン名を構成する
http://127.0.0.1:9200/ にアクセスし、cpolar Web UI 管理インターフェイスにログインし、左側のダッシュボードで [トンネル管理 - トンネル リスト] をクリックし、設定する 3000 のトンネルを見つけて、右側の [編集] をクリックします。
トンネル情報を変更し、正常に予約された第 2 レベルのサブドメイン名をトンネルに構成します。
- ドメイン名のタイプ: 第 2 レベルのサブドメイン名を選択します
- サブドメイン: 正常に予約された第 2 レベルのサブドメイン名を入力します。
クリック更新
更新が完了したら、オンライン トンネル リストを開くと、パブリック ネットワーク アドレスが変更され、アドレス名が予約済みの第 2 レベルのサブドメイン名になっていることがわかりますので、それをコピーします。
次に、固定の http アドレスを使用してブラウザ アクセスを開きます。
アクセスが成功すると、パブリック ネットワーク アドレスが固定され、ランダムに変更されなくなります。cpolar イントラネットに正常に侵入し、パブリック IP アドレスやルーターの設定を必要とせずに、nodejs サービスへのリモート アクセスを実現しました。
cpolar ポール クラウドの記事からの転載: Nodejs を使用してシンプルな HTTP サーバーを構築する – リモート アクセスのためのパブリック ネットワークへのイントラネットの侵入