Nodejs：打算用 Node-webkit 重做一个 ShadowSocks 客户端

Nodejs：打算用 Node-webkit 重做一个 ShadowSocks 客户端

客户端取名Nevermore，玩过Dota的应该知道这是影魔（Shadow Fiend）的名字，所以界面大面积使用了阴暗色 目前只是用纯html+css做了一个基础的界面，没有采用任何第三方js库和css库，也不打算使用Bootstrap库来做界面，对于这个项目来说太臃肿，jQuery也暂时不考虑，后期如果再加入新功能可能会比较麻烦，比如设置界面等，可能会引入Angular.js（数据绑定+模板） 最近很忙，今天简单填了一点坑，有兴趣的欢迎一起来完善 https://github.com/nihgwu/Nevermore.git 主界面： nevermore1.png 服务器列表界面： nevermore2.png


10 回复

Nodejs：打算用 Node-webkit 重做一个 ShadowSocks 客户端

背景介绍

客户端取名为 Nevermore，灵感来源于 Dota 游戏中的影魔（Shadow Fiend），因此整个界面采用了较为阴暗的色调。目前，我仅使用纯 HTML 和 CSS 创建了一个基础的用户界面，没有使用任何第三方 JavaScript 库或 CSS 框架，如 Bootstrap 或 jQuery。

技术选型

  • HTML/CSS：用于构建基础界面。
  • Node-Webkit：用于将网页应用打包成桌面应用程序。
  • Node.js：用于处理 ShadowSocks 相关逻辑，如网络请求、加密解密等。

界面展示

当前项目的主界面如下图所示：

Nevermore 主界面

服务器列表界面如下图所示：

Nevermore 服务器列表界面

示例代码

以下是一个简单的示例，展示了如何使用 Node.js 和 Node-Webkit 来创建一个基本的 ShadowSocks 客户端。

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
    });

    win.loadFile(path.join(__dirname, 'index.html'));
}

app.whenReady().then(() => {
    createWindow();

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nevermore - ShadowSocks Client</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <h1>ShadowSocks Client</h1>
        <button id="connect-button">Connect</button>
        <ul id="server-list">
            <!-- Server items will be dynamically added here -->
        </ul>
    </div>

    <script src="script.js"></script>
</body>
</html>

// script.js
document.getElementById('connect-button').addEventListener('click', () => {
    console.log('Connecting to ShadowSocks server...');
    // Add your ShadowSocks connection logic here
});

后续计划

由于近期事务繁忙，目前项目进展缓慢。不过，未来如果需要增加更多功能，如设置界面，可能会考虑引入 Angular.js 进行数据绑定和模板渲染，以简化开发工作。

参与方式

如果你对这个项目感兴趣，欢迎一起参与完善！你可以通过 GitHub 提交 Pull Request 或者 Issues，共同推动项目的发展。

GitHub 地址：https://github.com/nihgwu/Nevermore.git

希望以上内容能帮助你更好地理解和参与到 Nevermore 项目中。


这种东西，就干脆不要用css，更不要用Angular。 Angular只会吃内存，吃渲染效率，并且违背css html js分离原则。

如果你css不强，不如用纯粹的HTML更好。使用ul ol p足够排出工具类的页面。

为啥要重写？加了新功能还是？

赞

学习，fork

要不图标可以改成sf干脆

分享一下技术过程，搞个精华帖来看看哈~现在论坛支持加精了！

基于 electron 倒是 不错

Shadowsocks客户端多了去了，不用重复造轮子吧。

对于用 Node-Webkit (NW.js) 重写一个 ShadowSocks 客户端项目 Nevermore，我们可以从几个方面入手。首先，理解 ShadowSocks 的基本工作原理以及 Node-Webkit 如何帮助我们构建一个跨平台的应用程序。下面是基于你的描述，提供的一些实现思路和示例代码。

基本思路

  1. ShadowSocks 工作原理: 通过建立加密的TCP/UDP隧道来实现数据的传输。客户端将本地流量加密后发送到服务器，服务器解密后再转发到目标地址。
  2. NW.js 优势: 可以直接使用 HTML/CSS/JavaScript 来开发用户界面，并且可以调用 Node.js 的 API 来处理后台逻辑，如网络请求、文件操作等。

示例代码

这里仅展示如何在 NW.js 中创建一个简单的 GUI 应用来启动 ShadowSocks 客户端。完整的 ShadowSocks 实现会涉及到复杂的加密算法和网络编程知识，这里不进行深入讨论。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nevermore - ShadowSocks Client</title>
    <style>
        /* 基础样式 */
        body { background: #333; color: white; }
    </style>
</head>
<body>
    <h1>Nevermore - ShadowSocks Client</h1>
    <button id="start">Start ShadowSocks</button>

    <script>
        document.getElementById('start').onclick = function() {
            // 使用 child_process 模块启动 ShadowSocks 服务
            const { exec } = require('child_process');
            exec('ss-local -s your_server_ip -p your_server_port -l 1080 -k your_password -m aes-256-cfb', (error, stdout, stderr) => {
                if (error) {
                    console.error(`执行出错: ${stderr}`);
                    return;
                }
                console.log(`stdout: ${stdout}`);
            });
        };
    </script>
</body>
</html>

这段代码展示了一个非常基础的 UI，包含一个按钮，点击按钮时会在后台启动 ShadowSocks 服务。实际部署时，你需要根据自己的服务器配置替换掉 your_server_ip, your_server_port, your_password, 和 -m aes-256-cfb 参数。

注意: 上述命令行参数用于启动 ShadowSocks 客户端。你需要确保已经安装了相应的 ShadowSocks 库并正确配置。

这个例子仅仅展示了如何集成 Node.js 后台逻辑与前端界面。完整的 ShadowSocks 客户端需要更复杂的错误处理、日志记录等功能，以及可能需要实现 ShadowSocks 服务器端的功能。

回到顶部