WebSocket Node构建HTTP隧道实现实例

更新时间：2023年11月24日 10:05:10 作者：月弦笙音

这篇文章主要为大家介绍了WebSocket Node构建HTTP隧道实现实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

当我们开发一些与第三方服务集成的应用程序时，我们需要使我们的本地开发服务器暴露在网上。为此，我们需要为本地服务器提供一个 HTTP 隧道。HTTP 隧道如何工作？嘎嘎嘎，看下面！😍😍

为什么我们需要部署自己的 HTTP 隧道服务？

HTTP隧道有很多很❤的在线服务。🥑，我们可以用来获得付费的固定公共域来连接你的本地服务器。它还有一个免费包。但是对于免费套餐🍔，你无法获得固定域。重新启动客户端后，你将获得一个新的随机域。当你需要在第三方服务中保存域时，这很不方便。

要获得固定域，我们可以在自己的服务器中部署HTTP隧道。还提供用于服务器端部署的开源版本。但它是旧的 1.x 版本，不建议在生产环境中部署，存在一些严重的可靠性问题。

使用我们自己的服务器，它还可以确保数据安全。✨

关于精简版 HTTP 隧道简介

Lite HTTP 隧道是我最近为自托管 HTTP 隧道服务构建的。你可以使用 Github 存储库中的按钮部署它，以快速获得免费的固定 Heroku 域。Heroku

它是基于并且只有几个代码构建的。它使用 WebSocket 将 HTTP/HTTPS 请求从公共服务器流式传输到本地服务器。Express.js`Socket.io`

如何实现它

步骤 1：在服务器和客户端之间建立 WebSocket 连接

支持服务器端的WebSocket连接：socket.io

const http = require('http');
const express = require('express');
const { Server } = require('socket.io');
const app = express();
const httpServer = http.createServer(app);
const io = new Server(httpServer);
let connectedSocket = null;
io.on('connection', (socket) => {
  console.log('client connected');
  connectedSocket = socket;
  const onMessage = (message) => {
    if (message === 'ping') {
      socket.send('pong');
    }
  }
  const onDisconnect = (reason) => {
    console.log('client disconnected: ', reason);
    connectedSocket = null;
    socket.off('message', onMessage);
    socket.off('error', onError);
  };
  const onError = (e) => {
    connectedSocket = null;
    socket.off('message', onMessage);
    socket.off('disconnect', onDisconnect);
  };
  socket.on('message', onMessage);
  socket.once('disconnect', onDisconnect);
  socket.once('error', onError);
});
httpServer.listen(process.env.PORT);

✔在客户端连接 WebSocket：

const { io } = require('socket.io-client');
let socket = null;
function initClient(options) {
  socket = io(options.server, {
    transports: ["websocket"],
    auth: {
      token: options.jwtToken,
    },
  });
  socket.on('connect', () => {
    if (socket.connected) {
      console.log('client connect to server successfully');
    }
  });
  socket.on('connect_error', (e) => {
    console.log('connect error', e && e.message);
  });
  socket.on('disconnect', () => {
    console.log('client disconnected');
  });
}

步骤 2：使用 JWT 令牌保护 Websocket 连接

✔在服务器端，我们使用 socket.io 中间件来拒绝无效连接：

const jwt = require('jsonwebtoken');
io.use((socket, next) => {
  if (connectedSocket) {
    return next(new Error('Connected error'));
  }
  if (!socket.handshake.auth || !socket.handshake.auth.token){
    next(new Error('Authentication error'));
  }
  jwt.verify(socket.handshake.auth.token, process.env.SECRET_KEY, function(err, decoded) {
    if (err) {
      return next(new Error('Authentication error'));
    }
    if (decoded.token !== process.env.VERIFY_TOKEN) {
      return next(new Error('Authentication error'));
    }
    next();
  });  
});

步骤 3：将请求从服务器流式传输到客户端

✔我们实现一个可写流来将请求数据发送到隧道客户端：

const { Writable } = require('stream');
class SocketRequest extends Writable {
  constructor({ socket, requestId, request }) {
    super();
    this._socket = socket;
    this._requestId = requestId;
    this._socket.emit('request', requestId, request);
  }
  _write(chunk, encoding, callback) {
    this._socket.emit('request-pipe', this._requestId, chunk);
    this._socket.conn.once('drain', () => {
      callback();
    });
  }
  _writev(chunks, callback) {
    this._socket.emit('request-pipes', this._requestId, chunks);
    this._socket.conn.once('drain', () => {
      callback();
    });
  }
  _final(callback) {
    this._socket.emit('request-pipe-end', this._requestId);
    this._socket.conn.once('drain', () => {
      callback();
    });
  }
  _destroy(e, callback) {
    if (e) {
      this._socket.emit('request-pipe-error', this._requestId, e && e.message);
      this._socket.conn.once('drain', () => {
        callback();
      });
      return;
    }
    callback();
  }
}
app.use('/', (req, res) => {
  if (!connectedSocket) {
    res.status(404);
    res.send('Not Found');
    return;
  }
  const requestId = uuidV4();
  const socketRequest = new SocketRequest({
    socket: connectedSocket,
    requestId,
    request: {
      method: req.method,
      headers: { ...req.headers },
      path: req.url,
    },
  });
  const onReqError = (e) => {
    socketRequest.destroy(new Error(e || 'Aborted'));
  }
  req.once('aborted', onReqError);
  req.once('error', onReqError);
  req.pipe(socketRequest);
  req.once('finish', () => {
    req.off('aborted', onReqError);
    req.off('error', onReqError);
  });
  // ...
});

✔实现可读的流以在客户端获取请求数据：

const stream = require('stream');
class SocketRequest extends stream.Readable {
  constructor({ socket, requestId }) {
    super();
    this._socket = socket;
    this._requestId = requestId;
    const onRequestPipe = (requestId, data) => {
      if (this._requestId === requestId) {
        this.push(data);
      }
    };
    const onRequestPipes = (requestId, data) => {
      if (this._requestId === requestId) {
        data.forEach((chunk) => {
          this.push(chunk);
        });
      }
    };
    const onRequestPipeError = (requestId, error) => {
      if (this._requestId === requestId) {
        this._socket.off('request-pipe', onRequestPipe);
        this._socket.off('request-pipes', onRequestPipes);
        this._socket.off('request-pipe-error', onRequestPipeError);
        this._socket.off('request-pipe-end', onRequestPipeEnd);
        this.destroy(new Error(error));
      }
    };
    const onRequestPipeEnd = (requestId, data) => {
      if (this._requestId === requestId) {
        this._socket.off('request-pipe', onRequestPipe);
        this._socket.off('request-pipes', onRequestPipes);
        this._socket.off('request-pipe-error', onRequestPipeError);
        this._socket.off('request-pipe-end', onRequestPipeEnd);
        if (data) {
          this.push(data);
        }
        this.push(null);
      }
    };
    this._socket.on('request-pipe', onRequestPipe);
    this._socket.on('request-pipes', onRequestPipes);
    this._socket.on('request-pipe-error', onRequestPipeError);
    this._socket.on('request-pipe-end', onRequestPipeEnd);
  }
  _read() {}
}
socket.on('request', (requestId, request) => {
  console.log(`${request.method}: `, request.path);
  request.port = options.port;
  request.hostname = options.host;
  const socketRequest = new SocketRequest({
    requestId,
    socket: socket,
  });
  const localReq = http.request(request);
  socketRequest.pipe(localReq);
  const onSocketRequestError = (e) => {
    socketRequest.off('end', onSocketRequestEnd);
    localReq.destroy(e);
  };
  const onSocketRequestEnd = () => {
    socketRequest.off('error', onSocketRequestError);
  };
  socketRequest.once('error', onSocketRequestError);
  socketRequest.once('end', onSocketRequestEnd);
  // ...
});

步骤 4：将响应从客户端流式传输到服务器

✔实现可写流以将响应数据发送到隧道服务器：

const stream = require('stream');
class SocketResponse extends stream.Writable {
  constructor({ socket, responseId }) {
    super();
    this._socket = socket;
    this._responseId = responseId;
  }
  _write(chunk, encoding, callback) {
    this._socket.emit('response-pipe', this._responseId, chunk);
    this._socket.io.engine.once('drain', () => {
      callback();
    });
  }
  _writev(chunks, callback) {
    this._socket.emit('response-pipes', this._responseId, chunks);
    this._socket.io.engine.once('drain', () => {
      callback();
    });
  }
  _final(callback) {
    this._socket.emit('response-pipe-end', this._responseId);
    this._socket.io.engine.once('drain', () => {
      callback();
    });
  }
  _destroy(e, callback) {
    if (e) {
      this._socket.emit('response-pipe-error', this._responseId, e && e.message);
      this._socket.io.engine.once('drain', () => {
        callback();
      });
      return;
    }
    callback();
  }
  writeHead(statusCode, statusMessage, headers) {
    this._socket.emit('response', this._responseId, {
      statusCode,
      statusMessage,
      headers,
    });
  }
}
socket.on('request', (requestId, request) => {
    // ...stream request and send request to local server...
    const onLocalResponse = (localRes) => {
      localReq.off('error', onLocalError);
      const socketResponse = new SocketResponse({
        responseId: requestId,
        socket: socket,
      });
      socketResponse.writeHead(
        localRes.statusCode,
        localRes.statusMessage,
        localRes.headers
      );
      localRes.pipe(socketResponse);
    };
    const onLocalError = (error) => {
      console.log(error);
      localReq.off('response', onLocalResponse);
      socket.emit('request-error', requestId, error && error.message);
      socketRequest.destroy(error);
    };
    localReq.once('error', onLocalError);
    localReq.once('response', onLocalResponse);
  });

✔实现可读流以在隧道服务器中获取响应数据：

class SocketResponse extends Readable {
  constructor({ socket, responseId }) {
    super();
    this._socket = socket;
    this._responseId = responseId;
    const onResponse = (responseId, data) => {
      if (this._responseId === responseId) {
        this._socket.off('response', onResponse);
        this._socket.off('request-error', onRequestError);
        this.emit('response', data.statusCode, data.statusMessage, data.headers);
      }
    }
    const onResponsePipe = (responseId, data) => {
      if (this._responseId === responseId) {
        this.push(data);
      }
    };
    const onResponsePipes = (responseId, data) => {
      if (this._responseId === responseId) {
        data.forEach((chunk) => {
          this.push(chunk);
        });
      }
    };
    const onResponsePipeError = (responseId, error) => {
      if (this._responseId !== responseId) {
        return;
      }
      this._socket.off('response-pipe', onResponsePipe);
      this._socket.off('response-pipes', onResponsePipes);
      this._socket.off('response-pipe-error', onResponsePipeError);
      this._socket.off('response-pipe-end', onResponsePipeEnd);
      this.destroy(new Error(error));
    };
    const onResponsePipeEnd = (responseId, data) => {
      if (this._responseId !== responseId) {
        return;
      }
      if (data) {
        this.push(data);
      }
      this._socket.off('response-pipe', onResponsePipe);
      this._socket.off('response-pipes', onResponsePipes);
      this._socket.off('response-pipe-error', onResponsePipeError);
      this._socket.off('response-pipe-end', onResponsePipeEnd);
      this.push(null);
    };
    const onRequestError = (requestId, error) => {
      if (requestId === this._responseId) {
        this._socket.off('request-error', onRequestError);
        this._socket.off('response', onResponse);
        this._socket.off('response-pipe', onResponsePipe);
        this._socket.off('response-pipes', onResponsePipes);
        this._socket.off('response-pipe-error', onResponsePipeError);
        this._socket.off('response-pipe-end', onResponsePipeEnd);
        this.emit('requestError', error);
      }
    };
    this._socket.on('response', onResponse);
    this._socket.on('response-pipe', onResponsePipe);
    this._socket.on('response-pipes', onResponsePipes);
    this._socket.on('response-pipe-error', onResponsePipeError);
    this._socket.on('response-pipe-end', onResponsePipeEnd);
    this._socket.on('request-error', onRequestError);
  }
  _read(size) {}
}
app.use('/', (req, res) => {
  // ... stream request to tunnel client
  const onResponse = (statusCode, statusMessage, headers) => {
    socketRequest.off('requestError', onRequestError)
    res.writeHead(statusCode, statusMessage, headers);
  };
  socketResponse.once('requestError', onRequestError)
  socketResponse.once('response', onResponse);
  socketResponse.pipe(res);
  const onSocketError = () => {
    res.end(500);
  };
  socketResponse.once('error', onSocketError);
  connectedSocket.once('close', onSocketError)
  res.once('close', () => {
    connectedSocket.off('close', onSocketError);
    socketResponse.off('error', onSocketError);
  });
});

👍完成所有步骤后，我们支持将 HTTP 请求流式传输到本地计算机，并将响应从本地服务器发送到原始请求。它是一个精简的解决方案，但它稳定且易于在任何环境中部署。Node.js

如果你只想查找具有免费固定域的HTTP隧道服务，则可以尝试在Github自述文件中将Lite HTTP Tunnel项目部署到with中。希望小伙伴们能从这篇文章中学到一些东西😍。Heroku`Heroku deploy button`

以上就是WebSocket Node构建HTTP隧道实现实例的详细内容，更多关于WebSocket Node构建HTTP的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Nodejs小文件拷贝复制和大文件拷贝复制方法代码
NodeJS提供了基本的文件操作API,但是像文件拷贝复制这种高级功能就没有提供,因此我们先拿文件拷贝程序练手,文件拷贝复制是在Node.js中常见的操作之一,它允许我们将一个文件的内容复制到另一个文件中
2023-11-11
node.js与vue cli脚手架的下载安装配置方法记录
这篇文章主要给大家介绍了关于node.js与vue cli脚手架的下载安装配置方法,文中通过实例代码以及图文介绍的非常详细,对大家学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-01-01
Electron调用外接摄像头并拍照上传实现详解
这篇文章主要为大家介绍了Electron调用外接摄像头并拍照上传实例实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
node跨域转发 express+http-proxy-middleware的使用
这篇文章主要介绍了node跨域转发 express+http-proxy-middleware的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
node.js中的fs.fchownSync方法使用说明
这篇文章主要介绍了node.js中的fs.fchownSync方法使用说明,本文介绍了fs.fchownSync方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
2014-12-12
详解使用vscode+es6写nodejs服务端调试配置
本篇文章主要介绍了使用vscode+es6写nodejs服务端调试配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
node.js中watch机制详解
本文给大家带来的是一篇关于nodejs中watch机制的探讨，主要探讨内容是为什么watch不是银弹，尝试使用更好的方案来解决这个问题
2014-11-11
开发Node CLI构建微信小程序脚手架的示例
这篇文章主要介绍了开发Node CLI构建微信小程序脚手架，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
node.js监听文件变化的实现方法
这篇文章主要给大家介绍了关于node.js监听文件变化的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用node.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-04-04
nodejs基于express实现文件上传的方法
这篇文章主要介绍了nodejs基于express实现文件上传的方法,结合实例形式分析了nodejs基于express框架实现文件上传功能的具体步骤与相关操作技巧,需要的朋友可以参考下
2018-03-03