python与html5 websocket开发聊天对话窗

栏目: 后端 · 发布时间: 6年前

内容简介:1.下载必须的包 https://github.com/Pithikos/python-websocket-server,解压缩并把文件夹名‘python-websocket-server-master’ 改为‘websocket’2.websocket文件夹内只保留websocket_server文件夹和server.py

1.下载必须的包 https://github.com/Pithikos/python-websocket-server,解压缩并把文件夹名‘python-websocket-server-master’ 改为‘websocket’

python与html5 websocket开发聊天对话窗

2.websocket文件夹内只保留websocket_server文件夹和server.py

python与html5 websocket开发聊天对话窗

3.稍微修改server.py的源码

 1 from websocket_server import WebsocketServer
 2 
 3 # Called for every client connecting (after handshake)
 4 def new_client(client, server):
 5         print("New client connected and was given id %d" % client['id'])
 6         #server.send_message_to_all("a new client...")
 7         server.send_message(client,"请问有什么可以帮到您?")
 8 
 9 
10 # Called for every client disconnecting
11 def client_left(client, server):
12         print("Client(%d) disconnected" % client['id'])
13 
14 
15 # Called when a client sends a message
16 def message_received(client, server, message):
17         if len(message) > 200:
18                 message = message[:200]+'..'
19         print("Client(%d)_address%s said: %s" % (client['id'],client['address'], message))
20         server.send_message(client,'用户编号'+str(client['id'])+':'+message)
21 
22 
23 PORT=9001
24 server = WebsocketServer(PORT,host="192.168.150.128")
25 server.set_fn_new_client(new_client)
26 server.set_fn_client_left(client_left)
27 server.set_fn_message_received(message_received)
28 server.run_forever()

4.编辑client.html

 1 <!DOCTYPE html>
 2 <html>
 3    <head>
 4    <meta charset="utf-8">
 5    <title>html5 websocket特性</title>
 6    <style>
 7       body{
 8          overflow: hidden;
 9       }
10       h2{
11          margin-top: 30px;
12          text-align: center;
13          background-color: #393D49;
14          color: #fff;
15          font-weight: normal;
16          padding: 15px 0
17       }
18       #chat{
19          text-align: center;
20         
21       }
22       #win{
23          margin-top: 20px;
24          text-align: center;
25       }
26       #sse{
27          margin-top: 10px;
28          text-align: center;
29       }
30       #sse button{
31          background-color: #009688;
32          color: #fff;
33          height: 40px;
34          border: 0;
35          border-radius: 3px 3px;
36          padding-left: 10px;
37          padding-right: 10px;
38          cursor: pointer;
39       }
40    </style>
41    <script src="/static/js/jquery.min.js"></script>        
42    </head>
43    <body>
44       <h2>聊天室</h2>
45       <div id="chat">
46           <textarea id="history" cols="80" rows="40"></textarea>
47       </div>
48 
49       <div id="win">
50          <textarea id="messagewin" cols="80" rows="5"></textarea>
51       </div>
52       
53       <div id="sse">
54          <button onclick="sendMessage()">发送对话</button>
55       </div>
56       
57       <script type="text/javascript">      
58       var oHistory = $('#history');
59       var oWin = $('#messagewin');
60 
61       if ("WebSocket" in window){
62          console.log("您的浏览器支持 WebSocket!");
63          var ws = new WebSocket("ws://192.168.150.128:9001");
64         //var ws = new WebSocket("ws://localhost:9001");
65          ws.onopen = function(){
66             console.log("websocket 已连接上");
67          }
68 
69          ws.onmessage = function (evt) { 
70             var dataReceive = evt.data;
71             console.log("数据已接收..."+dataReceive);
72             $('#history').val($('#history').val()+dataReceive+"\n");
73          };
74 
75          ws.onclose = function()
76             { 
77               console.log("连接已关闭..."); 
78          };
79 
80       }else{
81          // 浏览器不支持 WebSocket
82          console.log("您的浏览器不支持 WebSocket!");
83       }
84       
85       function sendMessage(){
86          var dataSend = oWin.val().trim();
87          ws.send(dataSend);
88          oWin.val('');
89       }
90         
91    </script>
92    </body>
93 </html>

python与html5 websocket开发聊天对话窗

界面

3.终端运行server.py,然后通过浏览器访问client.html进行连接

python与html5 websocket开发聊天对话窗

终端运行server.py

python与html5 websocket开发聊天对话窗

浏览器访问对话客户端

python与html5 websocket开发聊天对话窗

终端显示

4.接着尝试在客户端发送一句话

python与html5 websocket开发聊天对话窗

python与html5 websocket开发聊天对话窗

python与html5 websocket开发聊天对话窗


以上所述就是小编给大家介绍的《python与html5 websocket开发聊天对话窗》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

理想主义者

理想主义者

[美] 贾斯汀·彼得斯 / 程静、柳筠 / 重庆出版社 / 2018-5-15 / 49.80元

2013年1月11日,年仅26岁的黑客亚伦·斯沃茨自杀身亡,此事在美国引起轩然大波。这不仅是因为在互联网领域,斯沃茨是一个可以与比尔·盖茨、马克·扎克伯格、理查德·斯托曼等齐名的人,更是因为此事揭露了传统世界与互联网世界的规则冲突。 在互联网思维下,信息是明码标价的商品。各种利益方用技术竖起了一道道藩篱,将支付不起费用但渴望用知识改变命运的人隔绝在外。于是,一大批希望改变这种模式的“理想主义......一起来看看 《理想主义者》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器