让前端js翻墙，充分利用Nodejs模块

发布于 1周前 作者 sinazl 来自 nodejs/Nestjs

让前端js翻墙，充分利用Nodejs模块

rrestjs的0.8版本发布了，修复了一些bug，新增了一些功能，主要新增加的一块是rrestpipe，让客户端也可以享受node.js模块的福利。其实是基于socketio和now.js实现的。 rrestjs项目地址：www.rrestjs.com 我们先看截图： enter image description here 1、当我们点击get请求按钮后，文本框里出现了前面域名内的内容，包括http的headers还有statuscode，和data也就是正文的字符串，这里是去请求了www.nodejs.org，前端跨域了。 2、当MD5时，把字符串rrestjs经过MD5后出现在右侧 3、读取文件后，根据前面的路径读取服务器的文件输出在右侧，这里读取的是项目根目录的packjson文件 4、序列化是指序列化 url 路径后得到的一个对象。

如果我们随便输入一些内容，就会出错了： enter image description here

服务端会报错，当然有一些简单的错误理由

我们先看服务端是如何注册事件的： 参考文件：https://github.com/DoubleSpout/rrestjs/blob/master/lib/pipe/pipe.js

/*下面就是我们刚才用到的服务端注册的2个方法*/
/*
第一个是 get 方法，异步
不多介绍了
*/

clientpipe.addasy(‘get’, function(url, asyback){
var http=require(‘http’);
http.get(url, function(res){
var body = ‘’;
res.on(‘data’, function (chunk) {
body += chunk;
});
res.on(‘end’, function(){
asyback(null, {headers:res.headers, statusCode:res.statusCode, data:body});
});
}).on(‘error’, function(e) {
asyback(‘get request error’);
});
});


/*
第三个是MD5方法
*/


clientpipe.addsyn(‘md5’, function(str){
var crypto = require(‘crypto’);
var shasum = crypto.createHash(‘md5’);
shasum.update(str);
return shasum.digest(‘hex’);
});

而我们的客户端只需要做2件事情就可以了： 参考文件：https://github.com/DoubleSpout/rrestjs/blob/master/example/static/pipe.html

<script src="/static/rrestpipe.js"></script>
<!--引入rrestpipe-->      
 rrestpipe.pipe("md5", "abcd", function(err, md5str){    
        alert(md5str);
    })        
    rrestpipe.pipe("get", "http://www.nodejs.org", function(err, res){  
        alert(res.data);//这里返回的是对象    
    })    
});

一个简单的服务端代码是：

地址:https://github.com/DoubleSpout/rrestjs/blob/master/example/rrestpipe.js

module.exports.conf= require('./config/post.conf.js');
var http = require('http'),
 rrest = require('../'),
    server = http.createServer(rrest(function (req, res) {
   res.send(htmlstr);
 })).listen(rrest.config.listenPort);
 rrest.clientpipe(server);

var fs = require('fs');
var htmlstr = fs.readFileSync(__dirname+'/static/pipe.html', 'utf-8')

大家如果感兴趣的话可以 npm install rrestjs

或者去github上下载rrestjs github地址 然后运行里面的 example/rrestpipe.js 实例看下就知道了，默认端口在3000

相信看完本文的TX都会问一个问题，安全如何保证，至于安全就要看你开发什么功能给前端js利用了


12 回复

让前端JS翻墙，充分利用Node.js模块

概述

rrestjs 的 0.8 版本发布，它修复了一些 bug 并增加了一些新功能，其中最重要的一项是 rrestpipe，使得客户端也能享受到 Node.js 模块的便利。这个功能实际上是基于 socket.io 和 now.js 实现的。

示例与代码

服务端代码

首先，我们来看一下服务端如何注册事件。这部分代码主要处理客户端的请求并返回相应的数据。

// 引入必要的模块
const http = require('http');
const rrest = require('rrestjs');
const fs = require('fs');

// 创建 HTTP 服务器
const server = http.createServer(rrest(function (req, res) {
    res.send(htmlstr);
})).listen(rrest.config.listenPort);

// 注册客户端管道
rrest.clientpipe(server);

// 读取静态 HTML 文件
const htmlstr = fs.readFileSync(__dirname + '/static/pipe.html', 'utf-8');

// 添加异步方法
rrest.pipe.addasy('get', function(url, asyback) {
    const http = require('http');
    http.get(url, function(res) {
        let body = '';
        res.on('data', function(chunk) {
            body += chunk;
        });
        res.on('end', function() {
            asyback(null, { headers: res.headers, statusCode: res.statusCode, data: body });
        });
    }).on('error', function(e) {
        asyback('get request error');
    });
});

// 添加同步方法
rrest.pipe.addsyn('md5', function(str) {
    const crypto = require('crypto');
    const shasum = crypto.createHash('md5');
    shasum.update(str);
    return shasum.digest('hex');
});
客户端代码

接下来，我们看看客户端如何调用这些服务端的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rrestjs Example</title>
</head>
<body>
    <button id="get-button">Get Data from Node.js Org</button>
    <input type="text" id="input-text">
    <button id="md5-button">MD5 Input Text</button>

    <script src="/static/rrestpipe.js"></script>
    <script>
        document.getElementById('get-button').addEventListener('click', function() {
            rrestpipe.pipe('get', 'http://www.nodejs.org', function(err, res) {
                if (err) {
                    console.error(err);
                } else {
                    alert(res.data); // 显示获取的数据
                }
            });
        });

        document.getElementById('md5-button').addEventListener('click', function() {
            const inputText = document.getElementById('input-text').value;
            rrestpipe.pipe('md5', inputText, function(err, md5str) {
                if (err) {
                    console.error(err);
                } else {
                    alert(md5str); // 显示 MD5 哈希值
                }
            });
        });
    </script>
</body>
</html>

功能演示

  1. GET 请求：点击 “Get Data from Node.js Org” 按钮后，会向 www.nodejs.org 发起 GET 请求，并将响应数据展示在弹窗中。
  2. MD5 计算：输入文本后，点击 “MD5 Input Text” 按钮，会计算输入文本的 MD5 哈希值并显示在弹窗中。

注意事项

  • 服务端会报错：如果客户端发送了无效或不合法的请求，服务端会抛出错误。
  • 安全性问题：确保只允许前端调用安全的方法，避免暴露敏感信息。

通过这种方式，前端 JS 可以方便地利用 Node.js 模块的功能，实现了跨域请求和数据处理。希望这篇教程对大家有所帮助！


越来越屌了，娃哈哈

为什么nodejs没有增加图形化编程模块，想写个验证码也只能通过前端来写

用词太粗俗了啊~哈哈

好了下个版本把验证码加上，你可以试着去rrestjs官网留言板发句话，里面是很有爱的验证码哦~ 地址：http://www.rrestjs.com/message

可以当爬虫用不？？

可以啊，而且爬虫的代码可以再前端写了，可以利用jquery了

rrestpipe 搞个上流一点的名字?

哇擦，好东西

你帮我取个吧，哈哈~

可惜nae不支持socket.io，没有演示地址了

为了实现前端JS通过Node.js模块进行数据处理，我们可以使用类似rrestjs库的方式，但实际应用中更推荐使用现代的框架和库来确保安全性和可维护性。下面我将提供一个简化版的实现方案，用于从远程服务器获取数据并进行简单处理（如MD5加密），同时展示如何通过Node.js模块与前端交互。

示例代码

Node.js服务端代码

首先，我们需要设置一个简单的Node.js服务器，该服务器能够处理前端发送的请求，并执行相应的操作。

const http = require('http');
const crypto = require('crypto');
const fs = require('fs');

// 创建HTTP服务器
const server = http.createServer((req, res) => {
  const url = req.url;

  if (url === '/api/md5') {
    // 获取查询参数中的字符串
    const str = req.query.str;
    // 计算MD5哈希值
    const hash = crypto.createHash('md5').update(str).digest('hex');
    res.end(hash);
  } else if (url === '/api/get') {
    // 获取查询参数中的URL
    const urlToFetch = req.query.url;
    // 使用HTTP模块从指定URL获取数据
    http.get(urlToFetch, response => {
      let data = '';
      response.on('data', chunk => {
        data += chunk;
      });
      response.on('end', () => {
        res.end(data);
      });
    });
  } else if (url === '/api/readfile') {
    // 读取文件内容
    const filePath = __dirname + '/package.json';
    const fileContent = fs.readFileSync(filePath, 'utf8');
    res.end(fileContent);
  }
});

server.listen(3000, () => {
  console.log('Server running on port 3000');
});

前端JavaScript代码

接下来，我们在前端使用fetch API向服务器发送请求，并处理响应。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node.js Example</title>
</head>
<body>
<button onclick="getMD5()">Get MD5 Hash</button>
<input type="text" id="inputStr" value="exampleString">
<script>
function getMD5() {
  const str = document.getElementById('inputStr').value;
  fetch(`/api/md5?str=${encodeURIComponent(str)}`)
    .then(response => response.text())
    .then(hash => alert(`MD5 Hash: ${hash}`));
}

// 获取远程页面内容
document.querySelector('button').addEventListener('click', () => {
  fetch('/api/get?url=http://www.nodejs.org')
    .then(response => response.text())
    .then(data => alert(`Remote Content: ${data}`));
});

// 读取本地文件内容
document.querySelector('button').addEventListener('click', () => {
  fetch('/api/readfile')
    .then(response => response.text())
    .then(content => alert(`File Content: ${content}`));
});
</script>
</body>
</html>

解释

上述代码展示了如何通过Node.js构建一个简单的API服务器，该服务器能够处理MD5计算、从远程服务器获取内容以及读取本地文件等请求。前端则通过AJAX调用这些API，并显示结果。这种方式避免了直接在前端进行复杂的网络操作或文件系统访问，而是通过后端处理这些任务，从而提高了安全性。

回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！