Vue中使用WebSocket调用星火大模型API接口，并实现富文本回显

本文章使用web端直接调用星火大模型接口，不涉及后端sdk调用。

涉及到的核心依赖库：vue3-markdown-it、highlight.js、crypto-js

效果如下：

1.星火官网购买tokens

进入星火官网讯飞星火大模型-AI大语言模型-星火大模型-科大讯飞 (xfyun.cn)，点击服务管理

进入控制台页面后点击立即购买，选择合适的套餐，新用户可以免费领取200万tokens

在控制台中创建应用，并获得相对应的APPID、APPKey和APPSecret。（后面要用）

2.根据API文档，调用接口

点击控制台中，星火大模型3.5的右下角文档按钮，进入文档星火认知大模型Web API文档 | 讯飞开放平台文档中心 (xfyun.cn)

文档中详细说明了接口的输入输出参数，同时给出了接口url。

传输协议 ：ws(s),为提高安全性，强烈推荐wss

星火大模型V3.5请求地址，对应的domain参数为generalv3.5：

wss://spark-api.xf-yun.com/v3.5/chat

星火大模型V3请求地址，对应的domain参数为generalv3：

wss://spark-api.xf-yun.com/v3.1/chat

星火大模型V2请求地址，对应的domain参数为generalv2：

wss://spark-api.xf-yun.com/v2.1/chat

星火大模型V1.5请求地址，对应的domain参数为general：

wss://spark-api.xf-yun.com/v1.1/chat

请求参数：

# 参数构造示例如下
{
        "header": {
            "app_id": "12345",
            "uid": "12345"
        },
        "parameter": {
            "chat": {
                "domain": "generalv3.5",
                "temperature": 0.5,
                "max_tokens": 1024, 
            }
        },
        "payload": {
            "message": {
                # 如果想获取结合上下文的回答，需要开发者每次将历史问答信息一起传给服务端，如下示例
                # 注意：text里面的所有content内容加一起的tokens需要控制在8192以内，开发者如有较长对话需求，需要适当裁剪历史信息
                "text": [
                    {"role":"system","content":"你现在扮演李白，你豪情万丈，狂放不羁；接下来请用李白的口吻和用户对话。"} #设置对话背景或者模型角色
                    {"role": "user", "content": "你是谁"} # 用户的历史问题
                    {"role": "assistant", "content": "....."}  # AI的历史回答结果
                    # ....... 省略的历史对话
                    {"role": "user", "content": "你会做什么"}  # 最新的一条问题，如无需上下文，可只传最新一条问题
                ]
        }
    }
}

接口请求字段由三个部分组成：header，parameter, payload。 字段解释如下

header部分

参数名称	类型	必传	参数要求	参数说明
app_id	string	是		应用appid，从开放平台控制台创建的应用中获取
uid	string	否	最大长度32