【扩展】WebSocket应用于AI应答

最新推荐文章于 2024-03-08 16:10:09 发布

彬宇.

最新推荐文章于 2024-03-08 16:10:09 发布

阅读量262

点赞数

文章标签： python

本文链接：https://blog.csdn.net/weixin_46588640/article/details/107990136

版权

server.py代码如下：

import tornado.ioloop as ioloop
import tornado.web as web
from tornado.websocket import WebSocketHandler


class AIHandler(WebSocketHandler):
    def check_origin(self, origin):
        # 解决跨域请求问题
        return True

    def open(self, *args, **kwargs):
        # 前端打开APP时
        # 保存客户端的连接
        print('---->客户端-->', self.request.remote_ip)

    def on_message(self, message):
        if 'hi' == message:
            self.write_message('您好')
        elif 'good' == message:
            self.write_message('你非常漂亮')
        else:
            self.write_message('我暂时无法理解您的意思')


def make_app():
    return web.Application([
        ('/ai/', AIHandler)
    ])


if __name__ == "__main__":
    app = make_app()
    app.listen(8001, '0.0.0.0')
    print('AI服务器已启动')
    ioloop.IOLoop.current().start()

ai.html 前端测试的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>AI 应答</title>
    <style>
        #msg{
            height: 400px;
            width: 600px;
            overflow: scroll;
            border: 1px solid red;
            padding: 10px;
        }

        #msg p{
            margin: 10px;
            font-size: 14px;
            padding: 5px;
        }

        .right{
            border-radius: 5px;
            text-align: right;
        }

        .right span{
            background-color: greenyellow;
            padding: 10px;
        }

        .left{
            border-radius: 5px;
        }

        .left span{
            background-color: palevioletred;
            color: white;
            padding: 10px;
        }

        input{
            display: inline-block;
            height: 40px;
            width: 400px;
            padding: 5px;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div id="msg">
    <p>欢迎进入AI聊天室</p>
</div>
<div>
    <input id="content" size="30" onchange="send_msg(this.value)">
    <button onclick="send_msg(content.value)">发送</button>
</div>

<script>
    var  websocket = new WebSocket('ws://localhost:8001/ai/')
    websocket.onmessage = function (ev) {
        msg.innerHTML += "<p class='left'><span>"+ev.data+"</p></span>"
    }

    function send_msg(content) {
        websocket.send(content)
        msg.innerHTML += "<p class='right'><span>"+content+"</p></span>"
    }
</script>
</body>
</html>

关于AI应答的设计思想：

设计AI关键字语义表， 主要定义可能交互或搜索的关键字，表结构如下：
|------------------------------------|
|  id | title   | content            |
|------------------------------------|
|  1 |   hi     |  你好               |
|------------------------------------|
|  2 |   disen  | 千锋最帅的Python的老师|
|------------------------------------|
|  3 |   disen  | 千锋最帅的Python的老师|
|------------------------------------|

当前端发送过来话题时: websocket.send(content), 后端 on_message(self, message) 则收到messgae，再通过DB类，从数据库中查询title对应的content, 并写给前端: self.write_message(content)。