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

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

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

 from websocket_server import WebsocketServer

 # Called for every client connecting (after handshake)

 def new_client(client, server):

         print("New client connected and was given id %d" % client['id'])

         #server.send_message_to_all("a new client...")

         server.send_message(client,"请问有什么可以帮到您？")

 # Called for every client disconnecting

 def client_left(client, server):

         print("Client(%d) disconnected" % client['id'])

 # Called when a client sends a message

 def message_received(client, server, message):

         if len(message) > 200:

                 message = message[:200]+'..'

         print("Client(%d)_address%s said: %s" % (client['id'],client['address'], message))

         server.send_message(client,'用户编号'+str(client['id'])+':'+message)

 PORT=9001

 server = WebsocketServer(PORT,host="192.168.150.128")

 server.set_fn_new_client(new_client)

 server.set_fn_client_left(client_left)

 server.set_fn_message_received(message_received)

 server.run_forever()

4.编辑client.html

 <!DOCTYPE html>

 <html>

    <head>

    <meta charset="utf-8">

    <title>html5 websocket特性</title>

    <style>

       body{

          overflow: hidden;

       }

       h2{

          margin-top: 30px;

          text-align: center;

          background-color: #393D49;

          color: #fff;

          font-weight: normal;

          padding: 15px 0

       }

       #chat{

          text-align: center;

       }

       #win{

          margin-top: 20px;

          text-align: center;

       }

       #sse{

          margin-top: 10px;

          text-align: center;

       }

       #sse button{

          background-color: #009688;

          color: #fff;

          height: 40px;

          border: 0;

          border-radius: 3px 3px;

          padding-left: 10px;

          padding-right: 10px;

          cursor: pointer;

       }

    </style>

    <script src="/static/js/jquery.min.js"></script>

    </head>

    <body>

       <h2>聊天室</h2>

       <div id="chat">

           <textarea id="history" cols="80" rows="40"></textarea>

       </div>

       <div id="win">

          <textarea id="messagewin" cols="80" rows="5"></textarea>

       </div>

       <div id="sse">

          <button onclick="sendMessage()">发送对话</button>

       </div>

       <script type="text/javascript">

       var oHistory = $('#history');

       var oWin = $('#messagewin');

       if ("WebSocket" in window){

          console.log("您的浏览器支持 WebSocket!");

          var ws = new WebSocket("ws://192.168.150.128:9001");

         //var ws = new WebSocket("ws://localhost:9001");

          ws.onopen = function(){

             console.log("websocket 已连接上");

          }

          ws.onmessage = function (evt) {

             var dataReceive = evt.data;

             console.log("数据已接收..."+dataReceive);

             $('#history').val($('#history').val()+dataReceive+"\n");

          };

          ws.onclose = function()

             {

               console.log("连接已关闭...");

          };

       }else{

          // 浏览器不支持 WebSocket

          console.log("您的浏览器不支持 WebSocket!");

       }

       function sendMessage(){

          var dataSend = oWin.val().trim();

          ws.send(dataSend);

          oWin.val('');

       }

    </script>

    </body>

 </html>

界面

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

终端运行server.py

浏览器访问对话客户端

终端显示

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

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

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

    WebSocket示例java的比较少,大部分是nodejs的,比较有名的是socket.io的chat, 借用下他的前端实现一套java的,后端基于https://github.com/genera ...

  2. AI人工智能-Python实现前后端人机聊天对话

    [前言] AI 在人工智能进展的如火如荼的今天,我们如果不尝试去接触新鲜事物,马上就要被世界淘汰啦~ 本文拟使用Python开发语言实现类似于WIndows平台的“小娜”,或者是IOS下的“Siri” ...

  3. Java后端WebSocket的Tomcat实现 html5 WebSocket 实时聊天

    WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端的通信功能,使服务端也能主动向客户端发送数据.Tomcat7.0.47上才能运行. 需要添加Tomcat里lib目 ...

  4. WebSocket 网页聊天室

    先给大家开一个原始的websocket的连接使用范例 <?php /* * recv是从套接口接收数据,也就是拿过来,但是不知道是什么 * read是读取拿过来的数据,就是要知道recv过来的是 ...

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

    Python之路,Day18 - 开发一个WEB聊天来撩妹吧   本节内容: 项目实战:开发一个WEB聊天室 功能需求: 用户可以与好友一对一聊天 可以搜索.添加某人为好友 用户可以搜索和添加群 每个 ...

  6. Java和WebSocket开发网页聊天室

    小编心语:咳咳咳,今天又是聊天室,到现在为止小编已经分享了不下两个了,这一次跟之前的又不大相同,这一次是网页聊天室,具体怎么着,还请各位看官往下看~ Java和WebSocket开发网页聊天室 一.项 ...

  7. python tornado websocket 多聊天室（返回消息给部分连接者）

    python tornado 构建多个聊天室, 多个聊天室之间相互独立, 实现服务器端将消息返回给相应的部分客户端! chatHome.py // 服务器端, 渲染主页 --> 聊天室建立web ...

  8. Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互

    引言 在与实现了语音合成.语义分析.机器翻译等算法的后端交互时,页面可以设计成更为人性化.亲切的方式.我们采用类似于聊天对话的实现,效果如下: 智能客服(输入文本,返回引擎处理后的文本结果) 语音合成 ...

  9. PyQt（Python+Qt）学习随笔：Qt Designer组件属性编辑界面中对话窗QDialog的modal属性

    modal属性表示窗口执行show()操作时是以模态窗口还是非模态窗口形式展示,缺省为False,设置该值与QWidget.windowModality的值设置为 Qt.ApplicationModa ...

随机推荐

  1. springBoot(3)---目录结构，文件上传

    目录结构,文件上传 一.目录结构 1.目录讲解 src/main/java:存放代码      src/main/resources                   static: 存放静态文件, ...

  2. 比较 Spring AOP 与 AspectJ

    本文翻译自博客Comparing Spring AOP and AspectJ(转载:https://juejin.im/post/5a695b3cf265da3e47449471) 介绍 如今有多个 ...

  3. mysql 开发进阶篇系列 12 锁问题(隔离级别下锁的差异)

    1. innodb在不同隔离级别下的一致性读及锁的差异 不同的隔离级别下,innodb处理sql 时采用的一致性读策略和需要的锁是不同的,同时,数据恢复和复制机制的特点,也对一些sql的一致性读策略和 ...

  4. 从零开始学 Web 之 Vue.js（六）Vue的组件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. T4代码生成器

    最近用MVC时业务上需要新增不同类型的视图页面,实际上页面排版什么的都差不多,只是内容有所不同,但是不能使用同一个视图. 想到了用T4代码生成器完成,之前就有听说过这个好东西,但是一直没有深入研究.借 ...

  6. Android Navigation 架构组件入门教程

    Android Navigation 架构组件入门教程 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请表明出处:https://www.cnblogs.com/cavalier-/p/1 ...

  7. Mysql加锁过程详解（2）-关于mysql 幻读理解

    Mysql加锁过程详解(1)-基本知识 Mysql加锁过程详解(2)-关于mysql 幻读理解 Mysql加锁过程详解(3)-关于mysql 幻读理解 Mysql加锁过程详解(4)-select fo ...

  8. Python多进程操作同一个文件，文件锁问题

    最近工作当中做了一个项目,这个项目主要是操作文件的. 在操作耗时操作的时候,我们一般采用多线程或者多进程.在开发中,如果多个线程需要对文件进行读写操作,就需要用到线程锁或者是文件锁. 使用fcntl ...

  9. javascript小实例，编写一个方法，实现从n-m个数中随机选出一个整数

    别怪我是一个闷葫芦,没那么多花哨的语言,废话不多说,先说说小实例的要求: 编写一个方法,实现从n-m个数中随机选出一个整数,要求:传递的参数不足两个或者不是有效数字,返回[0-1]之间的随机数,需要解 ...

  10. [译]如何在.NET Core中使用System.Drawing？

    你大概知道System.Drawing,它是一个执行图形相关任务的流行的API,同时它也不属于.NET Core的一部分.最初是把.NET Core作为云端框架设计的,它不包含非云端相关API.另一方 ...