速搭服务端调用OpenAI-API及Nginx反向代理ServerEvents


背景

有时候通过 chatGPT 前端访问的时候会出现一些拥塞或响应很慢,但 API 仍响应迅速,为了降低交互门槛,本篇将介绍如何速搭一个自己的前端页面,以 API 形式直接交互。

同时,在本次 Nginx 的反向代理中,引入了对于服务端推送事件(ServerEvents)的流式响应代理方法,实现响应文字的逐字输出。

注意:

API调用需要消耗 tokens,并非免费交互,请在使用前三思。

获取API Keys

此处省略账号 OpenAI 账号创建,请自行准备。

首先,登陆后台页面: OpenAI API

然后,在 API keys 中点击创建 secret key

点击 Create 后会有弹窗返回对应 key 内容

请妥善保管好你的 secret key。

部署服务

本次服务采用 GitHub - ddiu8081/chatgpt-demo 实现”开箱即用”。

环境依赖:

  • nodejs: ≥ 18.15.0
  • nginx

环境准备

cd /usr/local
wget https://nodejs.org/dist/v18.15.0/node-v18.15.0-linux-x64.tar.xz
tar xf node-v18.15.0-linux-x64.tar.xz
mv node-v18.15.0-linux-x64 node-v18.15.0
ln -s node-v18.15.0 node

export NODEPATH=/usr/local/node/bin
export PATH=$PATH:$NODEPATH

拉取仓库

在服务端执行如下命令

cd /opt
git clone https://github.com/ddiu8081/chatgpt-demo.git
cd chatgpt-demo

安装依赖

npm i -g pnpm
pnpm install

启动运行

# 请在 OPENAI_API_KEY 填入 OpenAI 上生成的 API Key
export OPENAI_API_KEY=sk-xxxx
pnpm run dev --host 0.0.0.0

浏览器验证访问: http://192.168.7.28:3000

访问正常,接下来开始配置域名的反向代理。

配置Nginx

此处省略 Nginx 安装。

upstream chatgpt_demo {
    server 192.168.7.28:3000;
}

server {
    listen  80;
    listen    443 ssl;
    server_name  chatgpt-demo.nestealin.com;
    charset utf-8;
    access_log  logs/$http_host.access.main.log  main;
    error_log  logs/chatgpt-demo.nestealin.com.error.log error;

    ssl_certificate      keys/server.cer;
    ssl_certificate_key  keys/server.key;
    ssl_session_timeout  5m;
    ssl_prefer_server_ciphers on;
    ssl_protocols TLSv1.2 TLSv1.3;

    location / { 
        chunked_transfer_encoding off;
        proxy_cache off;
        proxy_buffering off;
        proxy_redirect off;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-Port $remote_port;
        proxy_set_header Connection '';
        proxy_pass http://chatgpt_demo;
        
    }

}

由于 OpenAI 是以 Server Sent Events 形式进行交互,客户端以 text/event-stream 格式发送事件,而服务端也会以 EventSource 的事件类型进行流式响应,这也就是为什么能在前端看到响应文字是逐字输出的。

以下几项是实现逐字输出的关键

proxy_cache off;
proxy_buffering off;
proxy_http_version 1.1;
proxy_set_header Connection '';
chunked_transfer_encoding off;

如果没有上述配置,那么返回结果将会等 Nginx 在完整收到结果后,再一股脑整段成篇地返回给用户,而不会像在 chatGPT 页面那样逐字流畅返回。

访问测试

浏览器访问: https://chatgpt-demo.nestealin.com/

如上图所示,后续即可通过自己的服务端页面直接调用 API 交互。


Reference

Server-Sent Events服务器信息推送


文章作者: NesTeaLin
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 NesTeaLin !
  目录