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. mybatis框架(1)---mybatis入门

    mybatis入门   MyBatis是什么? MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了goog ...

  2. ZOJ Problem Set - 3708 Density of Power Network

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3708 #include <stdio.h> #include ...

  3. linux 命令 — find

    find 基本形式 find base_path base_path可以是任何目录,find会从该目录开始往下寻找 find . -print 列出当前目录下所有的文件和目录,以'\n'作为分隔符 f ...

  4. Jenkins入门之任务基本操作

    首先先简单讲一下Jenkins构建任务各种图标的含义 我的主界面有以下构建任务,这里前两列都是图标,第一列为构建的状态,前面已经讲过蓝色代表成功,红色代表失败.当然那是针对一次构建,一个构建任务可能有 ...

  5. retry重试常见场景及实现

    当我们的代码是有访问网络相关的操作时,比如http请求或者访问远程数据库,经常可能会发生一些错误,有些错误可能重新去发送请求就会成功,本文分析常见可能需要重试的场景,并最后给出python代码实现. ...

  6. μC/OS-II 中的任务管理

    1. 任务的状态及其转换 睡眠状态: 任务在没有被配备任务控制块或被剥夺了任务控制块时的状态叫做任务的睡眠状态. 等待状态: 正在运行的任务,需要等待一段时间或需要等待一个事件发生再运行时,该任务就会 ...

  7. JavaScript 系列博客（一）

    JavaScript 系列博客(一) 前言 本系列博客为记录学习 JavaScript 的学习笔记,会从基础开始慢慢探索 js.今天的学习笔记主要为 js 引入.定义变量以及 JavaScript 中 ...

  8. [转]Docker和Rancher的安装与基本使用

    本文转自:https://blog.csdn.net/wangshouhan/article/details/80405672 一.Docker1.CentOS下Docker安装 安装 $ yum - ...

  9. 第一册:lesson seventy three.

    原文: The way to King Street. Last week Mrs. Mills went to London. She does not know London very well, ...

  10. 8. 同步锁Lock

    package com.gf.demo07; import java.util.concurrent.locks.Lock; import java.util.concurrent.locks.Ree ...