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. 关于css,js放置位置的问题

    一天,小明正在网上查找资料,项目中遇到的问题需要通过查阅资料来解决,他看到一个标题很有意思,觉得这应该是他要找的答案,于是他就点了进去,结果进入网站后几秒钟的时间,网页还是一片空白,过了好久才加载完成 ...

  2. 2.ES6引进的新特性——类Class

    为什么? ES6中引入了类,类在java/c++等面向对象的编程语言常见,JS引入类是为了在日后使用js开发大型的应用程序,类本质是语法糖(语法上更加人性化) 以前写一个类 function User ...

  3. MyBatis源码解析（九）——Type类型模块之类型处理器注册器（TypeHandlerRegistry）

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6709157.html 1.回顾 上一篇研究的是类型别名注册器TypeAliasRegist ...

  4. Linux tee的花式用法和pee

    1.tee多重定向 tee [options] FILE1 FILE2 FILE3... tee的作用是将一份标准输入多重定向,一份重定向到标准输出/dev/stdout,然后还将标准输入重定向到每个 ...

  5. OJ：一道考察多态的题目

    Description 下面程序的输出结果是: A::Fun C::Do 程序代码 #include <iostream> using namespace std; class A { p ...

  6. Python爬虫之诗歌接龙

    介绍   本文将展示如何利用Python爬虫来实现诗歌接龙.   该项目的思路如下: 利用爬虫爬取诗歌,制作诗歌语料库: 将诗歌分句,形成字典:键(key)为该句首字的拼音,值(value)为该拼音对 ...

  7. 【转载】SQL语句用一个表的数据更新另一个表

    在Sqlserver的维护更新操作中,有时候涉及到Update操作,其中有一种情况是根据特定的条件,以一个表中的数据更新另一个表的数据,此时涉及到两个表之间的关系以及操作,此处介绍2种更新方法. (1 ...

  8. Jquery里的特定小技巧

    jQuery 动态设置样式:                      https://blog.csdn.net/xiaoyuncc/article/details/70854925 jquery如 ...

  9. MHA高可用

    MHA(Master High Availability)目前在 MySQL 高可用方面是一个相对成熟的解决方案,它由日本 DeNA 公司 youshimaton(现就职于 Facebook 公司)开 ...

  10. spring_05装配bean

    一.前言 <bean id="user1" scope="singleton" init-method="myInit" destro ...