使用python和tornado实现多人网页聊天程序--界面

最新推荐文章于 2022-12-26 16:20:33 发布

qq_41356456

最新推荐文章于 2022-12-26 16:20:33 发布

阅读量2.2k

点赞数 2

分类专栏： VS CODE学习 tornado 多人聊天文章标签：聊天室 python tornado VSCODE

本文链接：https://blog.csdn.net/qq_41356456/article/details/89947063

版权

tornado 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

VS CODE学习

2 篇文章 0 订阅

订阅专栏

多人聊天

2 篇文章 0 订阅

订阅专栏

标题使用python和tornado实现多人网页聊天程序

上一个文章给出了后端python的全部代码，那现在就到所有的页面处理了。
上面提到的几个页面分别有：
1.登录页面
2.注册页面
3.聊天室首页面
并且呢，聊天室界面点击之后会有很多其他功能：

聊天室编号：显示当前所有聊天室，用户点击后将直接进入聊天页面。
创建新的聊天室：用户可以选择创建新的聊天室，点击后进入聊天室设置（设置聊天室名字）。
刷新页面：当前有人创建了新的聊天室，但对于其他用户停留在主页面时，需要刷新才能显示出新的聊天室。
退出登录：点击后，用户退出登录，将进入登录界面。可以选择更换账号登录。
聊天页面。用户选择聊天室，进入聊天页面，功能上用户可以发送消息，可以选择回到主页面再选择聊天室。
创建新的聊天室。用户选择创建新的聊天室，进入设置页面，设置新的聊天室名字，创建后直接返回用户的主页面，并把所有聊天室显示出来。

4.出错页面。前面提到的错误在出错页面可以将错误信息显示出来，通过自动跳转，回到指定的路由url

1.登录页面html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
</head>
<body style="background-color: rgb(212, 231, 222);" background="/static/bg3.jpg">
        <center>
        <h1><font style="color:rgb(0, 0, 0)">登录聊天界面</font></h1>
        <br>
        <form  method="POST" action="/login" id="login" style="color: rgb(255, 255, 255)">
            <div>
        <font style="color:rgb(255, 255, 255)">账户：</font><input type="text" name="id"><br><br>
        </div>
        <div>
            <font style="color:rgb(252, 252, 252)">密码：<input type="password" name="passwd"><br>
        </div>
        <br>
        <br>
        <div>
            <input type="submit" value="登录">
            <input type="reset" value="重置">
        </div>
        <div>
            <br>
            <a href="/register/?new">新用户请先注册</a>
        </div>
    </form>
    </center>
<marquee direction='left'>欢迎来到聊天界面！</marquee>

<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<script>
        function register(){
            location = "http://127.0.0.1:8000/register";
        }
        
</script>
</body>
</html>

2.注册页面html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
</head>
<body style="background-color: rgb(212, 231, 222);" background="/static/bg3.jpg">
        <center>
        <h1>新用户注册</h1>
        <br>
        <form method="POST"  style="color: rgb(255, 255, 255)">
            <div>
        账户：<input type="text" name="id"><br><br>
        </div>
        <div>
        密码：<input type="password" name="passwd"><br><br>
        </div>
        <div>
        确认密码：<input type="password" name="passwd1"><br>
        </div>
        <br><br>
        <div>
            <input type="submit" value="注册" ><br>
            <input type="reset" value="重置">
        </div>
    </form>
    </center>
</body>
</html>

注册成功html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="{{info['second']}};url={{info['url']}}">
    <title>注册</title>
</head>
<body style="background-color: rgb(212, 231, 222)" background="/static/h.jpg">
        <center>
           <h1>{{info['info']}}</h1>
    </center>

</body>

3.聊天室首页面:
包含几个html：
basic.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到聊天室</title>
</head>
<body style="background-color: rgb(212, 231, 222);" background="/static/b.jpg">
        <p style="right: 0pt;font: outline;">欢迎！<font style="color:rgb(247, 3, 3)">{{id}}</font></p>
        <a href="/login" style="right:100%"><font style="color:darkred">切换账号</font></a>
        <center>
            <div>
                <h1>{{session }}的聊天室</h1>
            <div>
                {%for room in rooms%}
                    <a href="/home/?n={{room}}&u={{session}}">聊天室-{{room}}</a> <br>
                {%end%}
            </div>
                <br>
                <a href="/create/?u={{id}}"><font style="color:rgb(16, 18, 145)">创建新的聊天室</font></button>
                    <br><br>
                <a href='/basic/?u={{id}}'><font style="color:rgb(16, 18, 145)">点击刷新</font></a>
            </div>
        </center>

</body>
</html>

home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="background-color: rgb(212, 231, 222)" background="/static/bg4.jpg">
<div>
    <p style="right: 0pt;font: outline;"><font style="color:rgb(75, 8, 102)">{{id}}</font>已登录</p>
    <a href="/basic/?u={{id}}"><font style="color:rgb(5, 121, 101)">我的主页面</font></a>
    <center>
    <div style="width: 70%">
        <h1><font style="color:rgb(250, 249, 249)">聊天室-{{ n }}!</font></h1>
        <input type="hidden" value="{{ n }}" id="n">
        <input type="hidden" value="{{ u }}" id="u">
        
        <div id="chatinfo" style="background-color: lightyellow;opacity: 0.8;width:600px;height:350px;overflow:auto;padding: 10px;border: 1px solid #888">
            <!-- 聊天内容 -->
        </div>

        <div style="clear: both; margin-top: 20px">
            <input type="text" id="message">
            <button onclick="sendMessage" id="btn">发送</button><br>
            <button onclick="returnback" id="retn">返回</button>
            
        </div>
    </div>
</center>
</div>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<script>
    n = $("#n").val()
    u = $("#u").val()
    var ws=new WebSocket("ws://127.0.0.1:8000/newChatStatus/?n=" + n + "&u=" +u)   
    $('#btn').click(sendMessage)

    function sendMessage(){
        var message=$('#message').val()
        ws.send(message)
        $('#message').val("")
    }

    $('#retn').click(returnback)
    function returnback(){
        window.location.href="/basic/?u={{id}}";
    }

    ws.onmessage=function(evt){

        var data = JSON.parse(evt.data)  
        if(data['from']=='sys'){

            $('#chatinfo').append("<p style='width: 100%; text-align:center; font-size: 16px; color: green'>" + data['message'] + "</p>");
        }
        else if(data['from']==u)
        {

            $('#chatinfo').append("<p style='width: 100%; text-align:right; font-size:15px'>" + u + ": <br>" +"<span style='color: blue'>" + data['message'] + "</span>" + "</p>");
        }
        else{
            $('#chatinfo').append("<p style='width: 100%; text-align:left; font-size:15px'>" + data['from'] + ": <br>" +"<span style='color: red'>" + data['message'] + "</span>" + "</p>");
        }
    }
    ws.onerror=function(){

    }
    
</script>
</body>
</html>

create.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
</head>
<body style="background-color: rgb(219, 240, 231)" background="/static/b.jpg">
        <center>
        <p style="right: 0pt;font: outline;"><font style="color:rgb(247, 3, 3)">{{id}}</font> 已登录</p>
        <form method="POST" action='/create/?u={{id}}' style="color: rgb(255, 255, 255)">
            <input type="text" name="new_room" ><br>
            <input type="submit" value='立即创建'>
    </form>
    </center>

</body>

出错页面html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="{{info['second']}};url={{info['url']}}">
    <title>出错了》~《</title>
</head>
<body style="background-color: rgb(212, 231, 222)">
        
        <center>
            <img src="/static/8.gif"  alt="出错了" />
            <p>{{info['errorcontnet']}}</p><br>
           <h1>{{info['info']}}</h1>
    </center>

</body>

html写的不是很好，粗暴简单，但是功能实现了，想美化的可以自己改哦~
html学习可以到3wschool网站上学习的。

不要只想着拿别人的代码直接完成，重要的是学习的过程，要记得多学~不要照搬哦。
我写的不完美，我也会再学学的。
资源下载：https://download.csdn.net/download/qq_41356456/11165964
感谢你的浏览~欢迎留言点赞！

qq_41356456

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
2
评论
使用python和tornado实现多人网页聊天程序--界面

标题使用python和tornado实现多人网页聊天程序上一个文章给出了后端python的全部代码，那现在就到所有的页面处理了。上面提到的几个页面分别有：1.登录页面2.注册页面3.聊天室首页面并且呢，聊天室界面点击之后会有很多其他功能：聊天室编号：显示当前所有聊天室，用户点击后将直接进入聊天页面。创建新的聊天室：用户可以选择创建新的聊天室，点击后进入聊天室设置（设置聊天室名字）...
复制链接

扫一扫