記事ディレクトリ
序文
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 サービスをローカルに作成し、デモンストレーション用の小さなスネーク ページ ゲームを作成します。
まずローカルにフォルダーを作成し、フォルダー内に 2 つの新しいファイルを作成します。1 つはjs
ファイルhtml
、もう 1 つは同じディレクトリに配置し、vscode で開きます。
game.html文件
nodetest.js文件
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
ローカル ポート 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 レベルのサブドメイン名に変更されていることがわかります。
次に、固定の http アドレスを使用してブラウザ アクセスを開きます。
アクセスは成功し、パブリック ネットワーク アドレスは固定され、ランダムに変更されなくなります。cpolar イントラネットを通過して、パブリック ネットワーク IP やルーターを必要とせずに、nodejs サービスへのリモート アクセスを実現しました。
cpolar イントラネットペネトレーションの記事より転載: Nodejs を使用して HTTP サービスを構築し、パブリック ネットワークへのリモート アクセスを実現する「イントラネット ペネトレーション」