當前位置：首頁 > 编程语言 > python >内容正文

python

用Python写了个websocket即时聊天网页（含客户端、服务端代码）

發布時間：2024/1/1 python 29 豆豆

生活随笔收集整理的這篇文章主要介紹了用Python写了个websocket即时聊天网页（含客户端、服务端代码）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

其他的不說，原理自己搜下，直接上代碼

客戶端代碼：

<html> <head> <title>WebSocket</title><script src="jquery路徑" type="text/javascript"></script><style>*{font-family: "微軟雅黑"; margin: 0; padding: 0;}html, body{width: 100%; height: 100%; background: #000; position: relative;}.msgInfo{position: fixed; right: 2%; top: 2%; height: 96%; width: 20%; background: #666;} .msgInfo .hd{width: 100%; text-align: center; height: 40px; line-height: 40px; color: #fff; background: #333;} .msgInfo .bd{ padding: 20px; height: 100%; overflow: auto; color: #fff; line-height: 30px;} .msgInfo .bd p{margin: 5px 0;}.sendBox{position: fixed; left: 2%; bottom: 2%; width: 74%; height: 10%; background: #666; overflow: hidden;} .sendBox textarea{width: 90%; height: 100%; display: inline-block; background: #666; color: #fff; border: none; float: left;} .sendBox button{width: 10%; height: 100%; display: inline-block; background: #333; cursor: pointer; color: #fff; border: none; float: left;}.renBox{margin-left: 2%; margin-top: 2%; width: 74%; height: 84%; position: relative; overflow: hidden; float: left;} .renBox .ren{display: inline-block; position: absolute; left: 500px; top: 500px;} .renBox .ren .renHead{ display: inline-block; width: 20px; height: 20px; border-radius: 10px; background: #fff;} .renBox .ren .sayInfo{color: #fff; position: absolute; top: -30px; width: 200px; left: -90px; text-align: center;} .renBox div{color: #fff; margin-left: 100%; width: 100%; overflow: hidden; height: 30px;line-height: 30px; font-size: 20px;}.firstStep{position: fixed; width: 100%; height: 100%; z-index: 999; background: #000; text-align: center;} .firstStep .firstName{display: inline-block; padding-top: 300px;} .firstStep .firstName .username{width: 300px; height: 40px; border: 0; padding: 0 10px;} .firstStep .firstName .btn{width: 100px; height: 40px; border: 0; background: #333; color: #fff; cursor: pointer;}</style> <script> var socket; function init(username){var host = "ws://localhost:11011/name/"+username;try{ socket = new WebSocket(host); socket.onopen = function(msg){log('您已經進入聊天室')};socket.onmessage = function(msg){log(msg.data);};socket.onclose = function(msg){log("與服務器連接斷開");};}catch(ex){log(ex);}$(".sendInfo").focus(); } function send(){ var txt,msg; txt = $(".sendInfo");msg = txt.val();if(!msg){alert("Message can not be empty");return;}txt.val('');txt.focus(); try{socket.send(msg);$('.sayInfo').html(msg) // log("我說："+msg);} catch(ex){log(ex);} } window.οnbefοreunlοad=function(){ try{ socket.send('quit'); socket.close(); socket=null; } catch(ex){ log(ex); } }; function nameok(){var _name = $('input[name="username"]').val();if(!_name){alert('請給自己取個名字吧')}else{$('.firstStep').remove()init(_name)} }function log(msg){$('.msgInfo .bd').append('<p>'+ msg +'</p>');//動畫var _html = $('<div>',{'class':'showMsg'});_html.html(msg);$('.renBox').append(_html);_html.animate({'marginLeft':'-100%'}, 10000, function(){_html.remove()}) } function show(obj){obj.fadeIn() } function onkey(event){ if(event.keyCode==13){ send(); } } </script> <link href="/static/css/css.css" type="text/css" rel="stylesheet" /> </head> <body> <div class="renBox"> </div> <div class="msgInfo"><div class="hd">聊天記錄</div><div class="bd"></div> </div> <div class="sendBox"><textarea class="sendInfo"></textarea><button οnclick="send()">發送</button> </div> </body> <div class="firstStep"><div class="firstName"><input type="text" class="username" name="username" placeholder="給自己取一個響亮的名字！" /><input type="button" class="btn" οnclick="nameok()" value="進入聊天" /></div> </div> </html>

服務端代碼

# coding: utf-8from socket import * import json, time, threading config = {'HOST': 'localhost','PORT': 11011,'LISTEN_CLIENT': 50,'KEY': '391f10fadc339e9ec5fa15af60030ac1','SIZE': 2048,'TIME_OUT': 1000,'HEART_TIME': 5,'MAGIC_STRING': '258EAFA5-E914-47DA-95CA-C5AB0DC85B11','HANDSHAKE_STRING': "HTTP/1.1 101 Switching Protocols\r\n" \"Upgrade:websocket\r\n" \"Connection: Upgrade\r\n" \"Sec-WebSocket-Accept: {1}\r\n" \"WebSocket-Location: ws://{2}/chat\r\n" \"WebSocket-Protocol:chat\r\n\r\n" }class Server():"""服務端基類"""def __init__(self):self.sock = socket(AF_INET, SOCK_STREAM)self.sock.bind((config['HOST'], config['PORT'])) # 監聽端口self.sock.listen(config['LISTEN_CLIENT']) # 監聽客戶端數量# 所有監聽的客戶端self.clients = {}self.thrs = {}self.users = {}self.stops = []# 監聽客戶端連接def listen_client(self):while 1:# 循環監聽tcpClientSock, addr = self.sock.accept()address = addr[0] + ':' + str(addr[1]) # ip:port# 握手topInfo = tcpClientSock.recv(1024)headers = {}if not topInfo:tcpClientSock.close()continueheader, data = topInfo.split('\r\n\r\n', 1)try:getInfo = header.split('\r\n')[0].split(' ')[1].split('/')[1:]if getInfo[0] == 'name':self.users[address] = str(getInfo[1])else:self.users[address] = '匿名用戶'except:self.users[address] = '匿名用戶'for line in header.split('\r\n')[1:]:key, val = line.split(': ', 1)headers[key] = valif 'Sec-WebSocket-Key' not in headers:tcpClientSock.close()continueimport hashlib, base64sec_key = headers['Sec-WebSocket-Key']res_key = base64.b64encode(hashlib.sha1(sec_key + config['MAGIC_STRING']).digest())str_handshake = config['HANDSHAKE_STRING'].replace('{1}', res_key).replace('{2}', config['HOST'] + ':' + str(config['PORT']))tcpClientSock.send(str_handshake)# 握手成功分配線程進行監聽print(address+'進來了')self.clients[address] = tcpClientSockself.thrs[address] = threading.Thread(target=self.readMsg, args=[address])self.thrs[address].start()# print(self.clients)def readMsg(self, address):# print(self.clients)if address not in self.clients:return Falseclient = self.clients[address]import selecttime_out = 0while 1:# print(len(self.clients))if address in self.stops:self.close_client(address)print(address + u'已經離開了系統！')break# 檢測超時if time_out >= config['TIME_OUT']:self.close_client(address)breaktime_out += 5infds, outfds, errfds = select.select([client, ], [], [], 5)if len(infds) == 0:continuetime_out = 0try:info = client.recv(1024)except:self.close_client(address)breakif not info:continueif info == 'quit':self.close_client(address)breakcode_len = ord(info[1]) & 127if code_len == 126:masks = info[4:8]data = info[8:]elif code_len == 127:masks = info[10:14]data = info[14:]else:masks = info[2:6]data = info[6:]i = 0raw_str = ""for d in data:# print(masks, masks[i % 4])raw_str += chr(ord(d) ^ ord(masks[i % 4]))# print(raw_str)i += 1# 獲取到輸入的數據向所有的客戶端發送# 開啟線程記錄if raw_str:t1 = threading.Thread(target=self.send_data, args=[raw_str, address])t1.start()def send_data(self, data, address):import structfrom urllib import unquotetry:username = unquote(self.users[address])except:username = '匿名用戶'if data:data = str('【'+username+'說】'+data)else:return Falsetoken = "\x81"length = len(data)if length < 126:token += struct.pack("B", length)elif length <= 0xFFFF:token += struct.pack("!BH", 126, length)else:token += struct.pack("!BQ", 127, length)# struct為Python中處理二進制數的模塊，二進制流為C，或網絡流的形式。data = '%s%s' % (token, data)try:for key, val in self.clients.iteritems():client = valtry:client.send(data)except:self.close_client(key)except:passdef close_client(self, address):try:client = self.clients.pop(address)self.stops.append(address)client.close()del self.users[address]except:passprint(address+u'已經退出')if __name__ == '__main__':c = Server()c.listen_client()

總結

以上是生活随笔為你收集整理的用Python写了个websocket即时聊天网页（含客户端、服务端代码）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 3D迷宫（二）babylon.js
下一篇： 2018-11-08 jsp的基本格