随笔- 56 文章- 1 评论- 0 阅读- 5898

python 实现简单聊天室

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

<!DOCTYPE html>
<html>
 
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <style>
        p {
            text-align: left;
            padding-left: 20px;
        }
    </style>
</head>
 
<body>
<div style="width: 800px;height: 600px;margin: 30px auto;text-align: center">
    <h1>演示聊天室</h1>
    <div style="width: 800px;border: 1px solid gray;height: 300px;">
        <div style="width: 200px;height: 300px;float: left;text-align: left;">
            <p><span>当前在线:</span><span id="user_num">0</span></p>
            <div id="user_list" style="overflow: auto;">
            </div>
        </div>
        <div id="msg_list" style="width: 598px;border:  1px solid gray; height: 300px;overflow: scroll;float: left;">
        </div>
    </div>
    <br>
    <textarea id="msg_box" rows="6" cols="50" onkeydown="confirm(event)"></textarea><br>
    <input type="button" value="发送" onclick="send()">
</div>
</body>
 
</html>
<script type="text/javascript">
    var uname = prompt('请输入用户名', 'user' + uuid(8, 16));
    var ws = new WebSocket("ws://127.0.0.1:8081/ws");
    ws.onopen = function() {
        var data = "系统消息：建立连接成功";
        console.log("onopen")
        listMsg(data);
    };
    ws.onmessage = function(e) {
        console.log("onmessage")
        console.log(e)
        var msg = JSON.parse(e.data);
        console.log(e.data)
        var sender, user_name, name_list, change_type;
        switch (msg.type) {
            case 'system':
                sender = '系统消息: ';
                break;
            case 'user':
                sender = msg.from + ': ';
                break;
            case 'handshake':
                var user_info = {
                    'type': 'login',
                    'content': uname
                };
                sendMsg(user_info);
                return;
            case 'login':
            case 'logout':
                user_name = msg.content;
                name_list = msg.user_list;
                change_type = msg.type;
                dealUser(user_name, change_type, name_list);
                return;
        }
        var data = sender + msg.content;
        listMsg(data);
    };
    ws.onerror = function() {
        console.log("onerror")
        var data = "系统消息 : 出错了,请退出重试.";
        listMsg(data);
    };
 
    function confirm(event) {
        var key_num = event.keyCode;
        if (13 == key_num) {
            send();
        } else {
            return false;
        }
    }
 
    function send() {
        var msg_box = document.getElementById("msg_box");
        var content = msg_box.value;
        var reg = new RegExp("\r\n", "g");
        content = content.replace(reg, "");
        var msg = {
            'content': content.trim(),
            'type': 'user'
        };
        sendMsg(msg);
        msg_box.value = '';
    }
 
    function listMsg(data) {
        var msg_list = document.getElementById("msg_list");
        var msg = document.createElement("p");
        msg.innerHTML = data;
        msg_list.appendChild(msg);
        msg_list.scrollTop = msg_list.scrollHeight;
    }
 
    function dealUser(user_name, type, name_list) {
        var user_list = document.getElementById("user_list");
        var user_num = document.getElementById("user_num");
        while (user_list.hasChildNodes()) {
            user_list.removeChild(user_list.firstChild);
        }
        for (var index in name_list) {
            var user = document.createElement("p");
            user.innerHTML = name_list[index];
            user_list.appendChild(user);
        }
        user_num.innerHTML = name_list.length;
        user_list.scrollTop = user_list.scrollHeight;
        var change = type == 'login' ? '上线' : '下线';
        var data = '系统消息: ' + user_name + ' 已' + change;
        listMsg(data);
    }
 
    function sendMsg(msg) {
        var data = JSON.stringify(msg);
        ws.send(data);
    }
 
    function uuid(len, radix) {
        var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
        var uuid = [],
            i;
        radix = radix || chars.length;
        if (len) {
            for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
        } else {
            var r;
            uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
            uuid[14] = '4';
            for (i = 0; i < 36; i++) {
                if (!uuid[i]) {
                    r = 0 | Math.random() * 16;
                    uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                }
            }
        }
        return uuid.join('');
    }
</script>

服务端

#!/usr/bin/env python
#-*- coding:utf-8 -*-
# author:leo
# datetime:2022/7/7 17:37
# software: PyCharm
import asyncio
import websockets
import json
IP_ADDR = "127.0.0.1"
IP_PORT = "8081"
 
clients=list()
user_list=[]
msg={
  "type":"",
   "from": "",
   "ip": "",
   "user": "",
   "user_list": user_list,
}
# 握手，客户端来到就握手来进行双方的握手。
async def serverHands(websocket):
    msg["type"]="handshake"
    await websocket.send(json.dumps(msg))
    # while True:
    #     recv_text = await websocket.recv()
    #     print("recv_text=" + recv_text)
    #     if recv_text == "hello":
    #         print("connected success")
    #         await websocket.send("123")
    #         clients.append(websocket)
    #         return True
    #     else:
    #         await websocket.send("connected fail")
 
 
# 接收从客户端发来的消息并处理，再返给客户端ok
async def serverRecv(websocket):
    print(clients)
    while True:
        recv_text = await websocket.recv()
        print("recv:", recv_text)
        recv_dict=json.loads(recv_text)
        if recv_dict["type"]=="login":
            web_ditc=dict()
            web_ditc["user"]=recv_dict["content"]
            web_ditc["socket"]=websocket
            clients.append(web_ditc)
            msg["user_list"].append(recv_dict["content"])
            msg["type"]="login"
            msg["user"] = recv_dict["content"]
            msg["content"] = recv_dict["content"]
            for c in clients:
                try:
                    await c["socket"].send(json.dumps(msg))
                except Exception as e:
                    print(e)
        if recv_dict["type"]=="user":
            msg["type"]="user"
            msg["content"] = recv_dict["content"]
            for c in clients:
                if(c["socket"]==websocket):
                    msg["from"]=c["user"]
            for c in clients:
                try:
                    await c["socket"].send(json.dumps(msg))
                except Exception as e:
                    print(e)
 
 
# 握手并且接收数据
async def serverRun(websocket, path):
    print(path)
    try:
        await serverHands(websocket)
        await serverRecv(websocket)
    except Exception as e:
        print(e)
 
# main function
if __name__ == '__main__':
    print("======server main begin======")
    server = websockets.serve(serverRun, IP_ADDR, IP_PORT,ping_interval=None)
    print(server)
    asyncio.get_event_loop().run_until_complete(server)
    asyncio.get_event_loop().run_forever()