【原】ChatGPT整合layim实现网页版的聊天，一个字就是爽

❝

1. 采用缓存方式。用户第一次发送的消息没有及时返回。其实后端已经从OpenAI中获取了结果，并把结果缓存到redis中。当用户第二次输入相同的问题直接从redis中获取。
2. 调用微信公众号的客服接口。但是这种做法需要微信公众平台账号完成了微信认证。个人账号是无法实现微信认证的。

❞

为了实现更好效果，我采用layim作为前端页面，FastApi框架作为后端，并采用websocket方式实现。效果图如下：

代码实现

后端代码是采用FastApi框架的，核心代码如下：

router = APIRouter(tags=["ChatGPT接口"])
@router.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await manager.connect(websocket)
    try:
        while True:
            data = await websocket.receive_text()
            await manager.send_personal_message(generate_response(data), websocket)
    except WebSocketDisconnect:
        manager.disconnect(websocket)

其中manager是自己封装的websocket管理类，代码如下：

class ConnectionManager:

    def __init__(self) -> None:
        # 存放激活的ws连接对象
        self.active_connections: List[WebSocket] = []

    async def connect(self,ws:WebSocket):
        # 等待连接
        await ws.accept()
        # 存储ws连接对象
        self.active_connections.append(ws)
    
    def disconnect(self,ws:WebSocket):
        # 关闭时 移除ws对象
        self.active_connections.remove(ws)
    

    async def send_personal_message(self,message:str,ws:WebSocket):
        # 发送个人消息
        await ws.send_text(message)
    
    async def broadcast(self,message:str):
        for connection in self.active_connections:
            await connection.send_text(message)

manager = ConnectionManager()

前端是采用layim框架实现的。详细的用法参考手册文档前端核心代码如下：

  //建立WebSocket通讯
  //注意：如果你要兼容ie8+，建议你采用 socket.io 的版本。下面是以原生WS为例
  //var socket = io.connect('http://127.0.0.1')
  var ws = new WebSocket("ws://127.0.0.1/ws");
  layim.on('sendMessage',function(res){
    var mine = res.mine
    ws.send(mine.content)
    ws.onmessage = function(event) {
        console.log(event)
        //如果是来自于用户的聊天消息，它必须接受以下字段
        layim.getMessage({
        username: "OpenAi机器人" //消息来源用户名
        ,avatar: "https://didiplus.oss-cn-hangzhou./d5f1ae5b-d3ee-44fa-8b74-f8e775008a40.jpg" //消息来源用户头像
        ,id: "2" //消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
        ,type: "friend" //聊天窗口来源类型，从发送消息传递的to里面获取
        ,content: event.data //消息内容
        ,cid: 0 //消息id，可不传。除非你要对消息进行一些操作（如撤回）
        ,mine: false //是否我发送的消息，如果为true，则会显示在右方
        ,fromid: "2" //消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
        ,timestamp: Date.parse(new Date()) //服务端时间戳毫秒数。注意：如果你返回的是标准的 unix 时间戳，记得要 *1000
        });          
    }
  })

总结