Nodejs 五子棋项目怎么访问html页面?

Nodejs 五子棋项目怎么访问html页面?

我本地也只是在浏览器里这样的地址才能访问页面： file:///D:/node/five/client/ws.html

http://localhost:8080/也只是出来一句话: Welcome to socket.io.

但是怎么访问页面呢?下面的访问方式都不能访问： http://localhost:8080/five/client/ws.html 或者http://localhost:8080/node/five/client/ws.html也不行

请问各位 怎么访问?


8 回复

要在Node.js项目中正确地访问HTML页面，你需要设置一个简单的HTTP服务器来处理静态文件。以下是一个简单的例子，展示如何使用Express框架来设置一个服务器，以便能够通过浏览器访问到你的HTML页面。

首先，确保你已经安装了Node.js和npm。然后，在你的项目目录中初始化一个新的Node.js项目，并安装必要的依赖：

npm init -y
npm install express

接下来，创建一个名为server.js的文件，用于设置HTTP服务器。在这个文件中，我们将使用Express框架来提供静态文件服务。

const express = require('express');
const path = require('path');

const app = express();
const port = 8080;

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'five/client')));

// 启动服务器
app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

在这个配置中，我们告诉Express将five/client目录下的所有静态文件（包括HTML、CSS、JavaScript等）作为Web资源提供。这意味着如果你的HTML文件位于D:/node/five/client/ws.html，现在你可以通过http://localhost:8080/ws.html直接访问它。

解释

  • express.static()：这是一个中间件函数，用于提供静态文件服务。它会自动查找指定目录下的文件并发送给客户端。
  • path.join(__dirname, 'five/client')：这行代码将当前目录与相对路径合并，生成绝对路径，以方便Express找到你的静态文件。
  • app.listen()：启动服务器并监听指定端口上的请求。

通过这种方式，你可以轻松地从浏览器访问你的五子棋游戏的HTML页面，而无需手动输入文件路径。


localhost:8080上跑的是服务器端 这个客户端需要自己再开一个web服务器来运行的 那个包里面没看到服务器端程序 需要自己写一个的

var http = require(‘http’); var fs = require(‘fs’); var path = require(‘path’); var util = require(‘util’);

http.createServer(function (request, response) {

console.log('request starting...');

var filePath = ‘.’ + request.url;
if (filePath == ‘./’)
filePath = ‘./ws.html’;


var extname = path.extname(filePath);
var contentType = ‘text/html’;
var ifbinary = false;
switch (extname) {
case ‘.js’:
contentType = ‘text/javascript’;
break;
case ‘.css’:
contentType = ‘text/css’;
break;
case ‘.gif’:
contentType = ‘image/gif’;
ifbinary = true;
break;
case ‘.png’:
contentType = ‘image/png’;
ifbinary = true;
break;
case ‘.jpg’:
contentType = ‘image/jpeg’;
ifbinary = true;
break;
}


path.exists(filePath, function(exists) {


if (exists) {
    if (ifbinary) {
        fs.stat(filePath, function(error, stat) {
            var rs;
            response.writeHead(200,{ 'Content-Type': contentType, 'Content-Length' : stat.size });
            rs = fs.createReadStream(filePath);
            util.pump(rs, response, function(err) {
                if(err) {
                  throw err;
                }
            });
        });
    }
    else {
        fs.readFile(filePath, function(error, content) {
            if (error) {
                response.writeHead(500);
                response.end();
            }
            else {
                response.writeHead(200, { 'Content-Type': contentType });
                response.end(content, 'utf-8');
            }
        });
    }
}
else {
    response.writeHead(404);
    response.end();
}

});

}).listen(8125);

console.log(‘Server running at http://127.0.0.1:8125/’);

我那现成的东西改了一下 用这个来运行客户端 然后就可以用localhost:8125来访问ws.html了

在本地随便架设一个就可以了吧~

楼主能分享下五子棋的源码么？原作者提供的地址连接坏了。我的邮箱是hohai_wow@hotmail.com，不胜感激！！！

您好！按照您的解决方案大部分网页都可以访问了。 但是有参数的网页访问不了，报404错误。 例如：http://127.0.0.1:8125/abc.html?var=3 自我感觉这跟filePath变量的相关处理有关，但涉及多出不知道具体应该怎么修改。 新人，请指教！

关于参数的问题，木有人回答，只好自己解决了。 解决方案就是加一个fileName变量，判断字串里是否有’?’。如果有的话就去掉参数。代码如下：

if (filePath.indexOf(’?’)>0) var fileName = filePath.substr(0,filePath.indexOf(’?’)); else var fileName = filePath;

然后以下所有的filePath都替换成fileName。

要在Node.js中通过HTTP服务器访问HTML页面，你需要设置一个HTTP服务器来提供静态文件。这里以Express框架为例，它可以简化这一过程。首先，确保你安装了Express：

npm install express

然后，你可以创建一个简单的服务器文件（如server.js），并配置它来提供你的HTML文件：

const express = require('express');
const path = require('path');
const app = express();
const port = 8080;

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'five/client')));

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'five/client', 'ws.html'));
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}/`);
});

这段代码做了以下几件事：

  1. 使用Express设置了一个静态文件服务，可以自动提供five/client目录下的所有文件。
  2. 设置了根路径/指向ws.html文件，这样当你访问http://localhost:8080/时会加载该HTML文件。

接下来，启动你的服务器：

node server.js

现在，当你访问http://localhost:8080/时，你应该能够看到ws.html的内容。如果你希望直接通过http://localhost:8080/five/client/ws.html访问，只需移除或调整上述app.use(express.static(...))部分即可。

回到顶部