使用Python实现WebSocket通信的完整例子!

下面是一个后端使用Python实现 WebSocket 通信的示例,包含了前后端的代码和说明。

后端实现(Python Flask + Flask-SocketIO)

环境准备

确保你的环境中安装了 Flask 和 Flask-SocketIO。
你可以通过以下命令安装:

pip install Flask Flask-SocketIO

创建后端代码

然后创建一个名为 app.py 的文件,并在其中添加以下代码:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

# 创建 Flask 应用实例
app = Flask(__name__)
# 初始化 SocketIO
socketio = SocketIO(app)

@app.route('/')
def index():
    # 渲染前端 HTML 页面
    return render_template('index.html')

@socketio.on('message')
def handle_message(msg):
    # 处理接收到的消息
    print('Received message: ' + msg)
    # 向所有连接的客户端广播响应消息
    emit('response', 'Echo: ' + msg, broadcast=True)

if __name__ == '__main__':
    # 运行 Flask 应用
    socketio.run(app, debug=True)
  • Flask:创建一个 Flask 应用实例。
  • SocketIO:用于处理 WebSocket 通信。
  • @app.route('/'):定义一个路由,当访问根路径时,返回 index.html
  • @socketio.on('message'):处理名为 message 的事件,接收到消息后,将其打印并返回一个响应。
  • emit('response', ...):向所有连接的客户端发送消息。

前端实现(HTML + JavaScript)

在同一目录下创建一个 templates 文件夹,并在其中创建 index.html 文件,内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>
</head>
<body>
    <h1>WebSocket Communication</h1>
    <input id="messageInput" type="text" placeholder="Enter a message">
    <button id="sendButton">Send</button>
    <ul id="messages"></ul>

    <script>
        // 创建与服务器的 WebSocket 连接
        const socket = io();

        // 绑定点击事件,发送消息
        document.getElementById('sendButton').onclick = function() {
            const message = document.getElementById('messageInput').value;
            socket.emit('message', message);  // 发送消息
            document.getElementById('messageInput').value = '';  // 清空输入框
        };

        // 监听来自服务器的响应消息
        socket.on('response', function(msg) {
            const li = document.createElement('li');
            li.textContent = msg;  // 将消息显示在页面上
            document.getElementById('messages').appendChild(li);
        });
    </script>
</body>
</html>
  • HTML 部分定义了一个输入框、一个按钮和一个列表,用于显示消息。
  • JavaScript 部分使用 Socket.IO 创建与服务器的 WebSocket 连接。
  • 点击“Send”按钮时,会将输入框中的消息发送给服务器。
  • 通过 socket.on('response', ...) 监听服务器的响应,将其添加到消息列表中。

运行

  1. 启动后端服务:

    python app.py
  2. 打开浏览器,访问 http://127.0.0.1:5000

  3. 在输入框中输入消息并点击“Send”按钮,就可以看到发送的消息以及后端的响应。

总结

  • 后端使用 Flask 和 Flask-SocketIO 实现 WebSocket 服务,通过监听和发送事件进行通信。
  • 前端使用 HTML 和 JavaScript 创建用户界面,通过 Socket.IO 客户端与后端进行交互。
  • 该示例展示了 WebSocket 的基本用法,可以扩展以实现更复杂的功能,比如用户身份验证、房间功能等。

通过以上简单的示例,你应该快速了解了通过Python搭建 WebSocket 通信的基本框架,后续可以在此基础上进行更深入的开发。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:使用Python实现WebSocket通信的完整例子! - Python技术站

(0)

相关文章

  • python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)

    下面是对于“python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)”的详细攻略: 前言 Python作为动态语言,有着超高的开发效率,但是受限于解释器性能,Python在运行大型任务时性能一般。因此,我们在开发Web应用程序时,通常会使用Web框架来提高性能。 常用的Python Web框架有Django…

    Flask 2023年5月15日
    00
  • django 执行 python manage.py makemigrations 报错

    RuntimeError: Model class app_anme.models.xxx doesn’t declare an explicit app_label and isn’t in an application in INSTALLED_APPS.  将app加入settings的INSTALLED_APPS 中

    Django 2023年4月11日
    00
  • 整合django和bootstrap框架

    环境: python版本:2.7.8 django版本:1.7.1 bootstrap版本:3.3.0 首先github上面有两个开源的项目用来整合django和bootstrap. https://github.com/dyve/django-bootstrap-toolkit 对应的是bootstrap 2.0版本 https://github.com/…

    Django 2023年4月13日
    00
  • Python[问题处理] django-admin.py startproject learning_log .

    django-admin.py startproject learning_log .最近在学习Django,在创建工程文件夹的过程中遇到了一些问题 django-admin.py startproject learning_log . 该语句用于使用django来创建一个名为“ learning_log ”的工程名。 但在cmd中运行这个语句,并不能达到效…

    Django 2023年4月13日
    00
  • Django请求之HTTP请求

    —恢复内容开始— 请求响应Http   1发送Http请求   2 服务器接收,根据请求头中的URL在路由关系表中进行匹配(从上向下)   3匹配成功后,,执行指定的views函数,     一个URL 对应一个函数——–>这个叫FBV模式     一个URL对应一个类 ———->这个叫CBV模式     4 业务处…

    Django 2023年4月11日
    00
  • Django网络框架之HelloDjango项目创建教程

    下面我为你详细讲解” Django网络框架之HelloDjango项目创建教程” 的完整攻略,包含两条示例说明。 1. 环境准备 在开始创建 HelloDjango 项目之前,需要在本地电脑上安装好 Django 以及相关开发工具。可以在终端中输入以下命令来安装: pip install django 2. 项目创建 2.1 在终端中,切换到项目存放的目录下…

    Django 2023年5月16日
    00
  • Django框架之drf:9、接口文档,coreapi的使用,JWT原理、介绍、快速使用、定制、认证

    目录 Django框架之drf 一、接口文档 二、CoreAPI文档生成器 1、使用方法 三、JWT 1、JWT原理及介绍 2、JWP快速使用 3、定制返回格式 4、JTW的认证类 Django框架之drf 一、接口文档 简介: ​ 接口文档通常是在前后端分离时,后端开发人员需要编写的文档,其内容是将接口的信息、地址和使用方法及其他注意事项告知前端开发人员及…

    2023年4月10日
    00
  • django 后台显示字段修改

    1.app名称 本来估计能找到类似Mete中verbose_name_plural属性去更改app显示名称的,可以只找到一个app_label。但是由于django源码中是这样写的:    app_dict[app_label] = {           ‘name’: app_label.title(),           ‘app_url’: app…

    Django 2023年4月13日
    00

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

合作推广
合作推广
分享本页
返回顶部