python与html5 websocket开发聊天对话窗

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

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

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>

界面

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

终端运行server.py

浏览器访问对话客户端

终端显示

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

原文地址:https://www.cnblogs.com/youaremylife/p/9356313.html

时间: 2024-10-06 00:02:25

python与html5 websocket开发聊天对话窗的相关文章

[已解决]基于WebSocket开发聊天室应用

WebSocket示例java的比较少,大部分是nodejs的,比较有名的是socket.io的chat, 借用下他的前端实现一套java的,后端基于nimbleio实现的WebSocket编写, 直接上代码: public void accept(Session session, ReadFuture future) throws Exception { if (future instanceof HttpReadFuture) { super.accept(session, future);

Python之路,Day18 - 开发一个WEB聊天来撩妹吧

Python之路,Day18 - 开发一个WEB聊天来撩妹吧 本节内容: 项目实战:开发一个WEB聊天室 功能需求: 用户可以与好友一对一聊天 可以搜索.添加某人为好友 用户可以搜索和添加群 每个群有管理员可以审批用户的加群请求,群管理员可以用多个,群管理员可以删除.添加.禁言群友 可以与聊天室里的人进行临时会话(与qq群一样) 可以在群中发图片 可以与好友一对一发文件 知识必备: django html\css\js bootstrap jquery, ajax 前景介绍 首先我们知道http

Java和WebSocket开发网页聊天室

小编心语:咳咳咳,今天又是聊天室,到现在为止小编已经分享了不下两个了,这一次跟之前的又不大相同,这一次是网页聊天室,具体怎么着,还请各位看官往下看~ Java和WebSocket开发网页聊天室 一.项目简介 WebSocket是HTML5一种新的协议,它实现了浏览器与服务器全双工通信,这里就将使用WebSocket来开发网页聊天室,前端框架会使用AmazeUI,后台使用Java,编辑器使用UMEditor. 二.涉及知识点 网页前端(HTML+CSS+JS)和Java 三.软件环境 Tomcat

面向Web Cloud的HTML5 App开发实战:Browser&amp;HTML5&amp;CSS3&amp;PhoneGap&amp;jQuery Mobile&amp; WebSocket&amp;Node.js(2天)

如何理解Android架构设计的初心并开发出搭载Android系统并且具备深度定制和软硬整合能力特色产品,是本课程解决的问题. 课程以Android的五大核心:HAL.Binder.Native Service.Android Service(并以AMS和WMS为例).View System为主轴,一次性彻底掌握Android的精髓. 之所以是开发Android产品的必修课,缘起于: 1,     HAL是Android Framework&Application与底层硬件整合的关键技术和必修技

面向Web Cloud的HTML5 App开发实战:Browser&amp;HTML5&amp;CSS3&amp;PhoneGap&amp;jQuery Mobile&amp; WebSocket&amp;Node.js(3天)

课程简介: 王家林老师(联系邮箱[email protected] 电话:18610086859 QQ:1740415547 微信号:18610086859) 22个HTML5主题一次性贯穿HTML5的一切技术: 一网打尽HTML5时代Device.(设备端).Browser(浏览器)和Cloud(浏览器)的所有技术: 以浏览器定制技术为基础,通晓HTML5+CSS3+PhoneGap+Web Socket +jQuery Mobile +Node.js等HTML5的六大核心技术: 最新研发的H

html5 websocket + node.js 实现网页聊天室

1 client:    socket.io server:   node.js +  express  + socket.io 一个简单的聊天室  demo,没有注册,内置了一些测试用户 2 client 关键代码 var socket = io.connect('http://localhost:8080'); socket.on('connect',function(){ console.log('connected to server'); socket.on('login succes

使用 HTML5 WebSocket 构建实时 Web 应用

作为下一代的 Web 标准,HTML5 拥有许多引人注目的新特性,如 Canvas.本地存储.多媒体编程接口.WebSocket 等等.这其中有"Web 的 TCP "之称的 WebSocket 格外吸引开发人员的注意.WebSocket 的出现使得浏览器提供对 Socket 的支持成为可能,从而在浏览器和服务器之间提供了一个基于 TCP 连接的双向通道.Web 开发人员可以非常方便地使用 WebSocket 构建实时 web 应用,开发人员的手中从此又多了一柄神兵利器.本文首先介绍

[转]使用 HTML5 WebSocket 构建实时 Web 应用

HTML5 WebSocket 简介和实战演练 本文主要介绍了 HTML5 WebSocket 的原理以及它给实时 Web 开发带来的革命性的创新,并通过一个 WebSocket 服务器和客户端的案例来充分展示 WebSocket 的强大和易用. 作为下一代的 Web 标准,HTML5 拥有许多引人注目的新特性,如 Canvas.本地存储.多媒体编程接口.WebSocket 等等.这其中有“Web 的 TCP ”之称的 WebSocket 格外吸引开发人员的注意.WebSocket 的出现使得浏

Spring之WebSocket网页聊天以及服务器推送

Spring之WebSocket网页聊天以及服务器推送 转自:http://www.xdemo.org/spring-websocket-comet/ /Springframework /Spring之WebSocket网页聊天以及服务器推送 1. WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duplex). 2. 轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客服端