python与html5 websocket开发聊天对话窗

来源:http://www.prospettivedarte.com 作者:计算机教程 人气:123 发布时间:2019-05-10
摘要:  1. 流程分析 用户点击二维码登录, 弹出二维码, 前端和server端连接websocket连接 当用户扫描二维码时, 请求后端某一个接口, 后端在接口里连接server端,向server推送消息 server端接收到推送

 

1. 流程分析

  • 用户点击二维码登录, 弹出二维码, 前端和server端连接websocket连接
  • 当用户扫描二维码时, 请求后端某一个接口, 后端在接口里连接server端, 向server推送消息
  • server端接收到推送的消息, 将其推送给浏览器, 从而完成交互过程

皇牌天下投注网 1

3. 模拟过程

  • 在终端里执行php server.php, 开启服务, 等待客户端(浏览器和php客户端)连接

    皇牌天下投注网 2server.png

  • 浏览器里打开client.html, 打开控制台console, 点击按钮->链接到websocket

    皇牌天下投注网 3client.png

  • 另开一个终端, 执行php push.php, 此时再客户端就能看到php推送过来的消息, 从而完成一次交互

    皇牌天下投注网 4push.png

    客户端接收到php推送的消息

    皇牌天下投注网 5success.png

  • 可以使用多个客户端, 将uid改成uid2, 模拟多个用户

终端运行server.py

2. 具体实现

参考官网文档: http://doc.workerman.net/worker/listen.html

  • composer安装workerman/workermancomposer require workerman/workerman

  • server端代码如下server.php

<?php/** * 认真编码 快乐生活 * User: helloJiu * Date: 2018/9/12 * Time: 17:42 */use WorkermanWorker;require_once __DIR__ . '/vendor/autoload.php';// 初始化一个worker容器, 监听19999端口, 用于接收浏览器websocket请求$worker = new Worker('websocket://0.0.0.0:19999');$worker->count = 4;// worker进程启动后创建一个text Worker以便打开一个内部通讯端口$worker->onWorkerStart = function { // 开启一个内部端口,方便内部系统推送数据,Text协议格式 文本 换行符 $inner_text_worker = new Worker('text://0.0.0.0:10002'); $inner_text_worker->onMessage = function ($connection, $buffer){ // 使用uid判断需要向哪个页面推送数据 // $data数组格式,里面有uid,表示向那个uid的页面推送数据 $data = json_decode($buffer, true); $uid = $data['uid']; // 通过workerman,向uid的页面推送数据 $res = sendMessageByUid($uid, $buffer); $connection->send($res ? 'ok' : 'fail'); }; $inner_text_worker->listen();};$worker->uidConnections = [];// 当有客户端发来消息时执行的回调函数, 客户端需要表明自己是哪个uid$worker->onMessage = function ($connection, $data){ global $worker; if(!isset($connection->uid)){ // 没验证的话把第一个包当做uid(这里为了方便演示,没做真正的验证) $connection->uid = $data; $worker->uidConnections[$connection->uid] = $connection; return ; }};$worker->onClose = function ($connection){ global $worker; if(isset($connection->uid)){ unset($worker->uidConnections[$connection->uid]); }};function broadCast{ global $worker; foreach ($worker->uidConnections as $connection){ $connection->send; }}// 向客户端某一个uid推送数据function sendMessageByUid($uid, $message){ global $worker; if(isset($worker->uidConnections[$uid])){ $connection = $worker->uidConnections[$uid]; $connection->send; return true; } return false;}Worker::runAll();
  • 客户端代码建立websocket连接, 等待消息推送client.html
<!DOCTYPE html><html><head lang="en"> <meta charset="utf-8"> <title></title></head><body> <h3>WebSocket协议的客户端程序</h3> <button >连接到WS服务器</button> <button >向WS服务器发消息并接收消息</button> <button >断开与WS服务器的连接</button> <div ></div><script type="text/javascript"> var wsClient=null; btConnect.onclick=function(){ wsClient=new WebSocket('ws://127.0.0.1:19999'); console.log wsClient.onopen = function(){ var uid = 'uid1'; // 表名自己是uid1 wsClient.send; console.log('ws客户端已经成功连接到服务器上') } wsClient.onmessage = function{ console.log('ws客户端收到一个服务器消息:' e.data); val.innerHTML=e.data; } } btSendAndReceive.onclick = function(){ wsClient.send('Hello Server'); wsClient.onmessage = function{ console.log('ws客户端收到一个服务器消息:' e.data); val.innerHTML=e.data; } } btClose.onclick = function(){ wsClient.close(); wsClient.onclose = function(){ console.log('到服务器的连接已经断开'); } }</script></body></html>
  • 模拟微信登陆后 请求php接口, 完成消息推送push.php
<?php/** * 认真编码 快乐生活 * User: helloJiu * Date: 2018/9/12 * Time: 18:06 */// 建立socket连接到内部推送端口$client = stream_socket_client('tcp://127.0.0.1:10002', $errno, $errmsg, 1);// 推送的数据,包含uid字段,表示是给这个uid推送$data = array('uid'=>'uid1', 'percent'=>'88%');// 发送数据,注意5678端口是Text协议的端口,Text协议需要在数据末尾加上换行符fwrite($client, json_encode."n");// 读取推送结果echo fread($client, 8192);fclose;

界面

前言:

在项目中, 系统需要接入微信登录, 当手机扫描二维码, PHP后端如何通知前端用户是否同意微信登录实现方式有两种:

  1. 皇牌天下投注网,轮询
  2. websocket本文主要使用PHP workerman实现server端

 

皇牌天下投注网 6

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

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

 

 

皇牌天下投注网 7

4.编辑client.html

 

 

皇牌天下投注网 8

 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>

皇牌天下投注网 9

终端显示

本文由皇牌天下投注网发布于计算机教程,转载请注明出处:python与html5 websocket开发聊天对话窗

关键词:

上一篇:HTML5笔记3——Web Storage和本地数据库

下一篇:没有了

频道精选

最火资讯