vue仿chatgpt的ai聊天功能--通义千问（阿里云）

开发前的准备

1.阿里云开通模型服务灵积-获取key

阿里云-通义千问文档: 点击跳转

2.使用文档中的sse流式返回

参考:官方文档中 HTTP调用接口-请求实例（SSE开启）

1.请求地址：
 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation' 
1.请求头：
--header 'Authorization: Bearer ' \
--header 'Content-Type: application/json' \
--header 'X-DashScope-SSE: enable' \
3.post传值：
data{
    "model": "qwen-turbo",
    "input":{
        "messages":[      
            {
                "role": "system",
                "content": "You are a helpful assistant."
            },
            {
                "role": "user",
                "content": "你好，哪个公园距离我最近？"
            }
        ]
    },
    "parameters": {
        "result_format": "message"
    }
}'

3.vue中使用

(1)安装请求sse 接口调用fetchEventSource

npm install @microsoft/fetch-event-source

(2)将fetchEventSource引入到项目中

import { fetchEventSource } from "@microsoft/fetch-event-source"

(3)请求接口-通义千问api

//封装调用千问api方法，data：请求bady， key：密钥
        aiSse (data,key) {
            let that = this
            let controller = new AbortController()
            const eventSource = fetchEventSource('/tyqw/api/v1/services/aigc/text-generation/generation', {
            method: 'POST',
            headers: {
              Authorization: key,
              'Content-Type': 'application/json',
              'Accept':'text/event-stream',
              'X-DashScope-SSE': 'enable',
              },
            body: JSON.stringify(
              data
            ),
            signal: controller.signal,
            onopen() {
              console.log('open')
            },
            onmessage(event) {
              console.log('onMessage',event.data)
              let data = event.data
              let jsonData = JSON.parse(data);
            //   console.log('jsonData', jsonData);
            //   console.log('jsonData-value', jsonData.output.choices[0].message.content);
              const textValue = jsonData.output.choices[0].message.content
              const textStatus = jsonData.output.choices[0].finish_reason
                // that.text += textValue.slice(that.text.length)
                if (that.addStatus) {
                    that.text += textValue
                    that.scrollToBottom()
                }
                // console.log('that.text', that.text);
                // console.log('that.text.length', that.text.length);
                // console.log('jsonData.output.choices[0].message.content.slice(that.text.length)', textValue.slice(that.text.length));
                if (textStatus == 'stop') {
                    console.log('完成了，需要赋值');
                    console.log('text--------', that.text);
                    that.textList[that.textList.length-1] = {
                        type: 'ai',
                        value: that.text
                    }
                    that.helpStatus = false
                    that.addStatus = false
                    // let cursorFlask = document.getElementById("cursorFlask");
                    // cursorFlask.style.opacity = '0'
                }
            },
            onclose() {
              controller.abort();//出错后不要重试
              eventSource.close();
            },
            onerror(error) {
              console.log('close',error)
            //   controller.abort();//出错后不要重试
              eventSource.close();
              this.$message.error(`系统错误：${error}`)
              that.helpStatus = false
            }
        })
        },

（4）点击按钮- 获取千问key- 发送请求到api

        // 获取ai回答接口key
        async getAuxiliaryKeyFn () {
            const res = await getAuxiliaryKey()
            console.log('获取ai回答接口key', res);
            if (res.status == 200) {
                // 调用通义千问api
                const apiKey = res.data.apiKey; // 替换为你的API密钥
                const data = {
                    model: 'qwen-turbo',
                    input: {
                        messages: [
                            {
                                "role": "system",
                                "content": "You are a helpful assistant."
                            }, 
                            {
                                "role": "user",
                                "content": this.principalActionText
                            }
                        ]  
                    },
                    parameters: {
                        result_format: 'message',
                        incremental_output: true
                    }
                }
                this.addStatus = true
                this.aiSse(data,apiKey)            
            } else {
                this.$message.error(res.msg || '请求错误，请检查网络或放量已到最大限额');
            }
        },

（5）根据个人情况-点击发送时调用

      	this.getAuxiliaryKeyFn()

4.最后展示ai返回的对话款需要用的vue-Markdown

ai返回是markdown格式的，
npm install vue-markdown --save
import VueMarkdown from 'vue-markdown'

  

    
  


import VueMarkdown from 'vue-markdown';
export default {
  data() {
    return {
      markdown: '# Hello, Vue Markdown!'
    }
  },
  components: {
    VueMarkdown
  }
}

最后服务器上代理的问题：

问题描述:本地上没问题，测试环境报错502，或者跨域—就是没代理成功

最后运维成功的代理, tyqw 代理标识

本身域名有证书 
  location ^~ /tyqw/
  {
      proxy_pass https://dashscope.aliyuncs.com/;
      proxy_ssl_server_name on; 
      proxy_set_header Host dashscope.aliyuncs.com;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header REMOTE-HOST $remote_addr;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection $connection_upgrade;
      proxy_http_version 1.1;
      # proxy_hide_header Upgrade;
  
      add_header X-Cache $upstream_cache_status;
      #Set Nginx Cache
  
      set $static_file8WLuNoD1 0;
      if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
      {
          set $static_file8WLuNoD1 1;
          expires 1m;
      }
      if ( $static_file8WLuNoD1 = 0 )
      {
          add_header Cache-Control no-cache;
      }
  }
还有在ks8上下来 （不懂啥意思，如果如遇到这类问题，可以发给运维看看）