Python web实战 | 使用 Flask 实现 Web Socket 聊天室

这篇具有很好参考价值的文章主要介绍了Python web实战 | 使用 Flask 实现 Web Socket 聊天室。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Python web实战 | 使用 Flask 实现 Web Socket 聊天室,python,开发语言,flask,webkit


 文章来源地址https://www.toymoban.com/news/detail-621854.html

概要

 

今天我们学习如何使用 Python 实现 Web Socket,并实现一个实时聊天室的功能。本文的技术栈包括 Python、Flask、Socket.IO 和 HTML/CSS/JavaScript。

 

什么是 Web Socket?

Web Socket 是一种在单个 TCP 连接上进行全双工通信的协议。它是 HTML5 中的一部分,并且可以在浏览器和服务器之间创建实时的交互式 Web 应用程序。Web Socket 通过在服务器和客户端之间建立持久连接,实现了实时的双向数据传输。

Web Socket 和 Socket 有什么关系和区别

WebSocket和Socket都是用于网络通信的协议。

Socket是一种在网络应用程序中使用的标准API,它允许应用程序通过TCP或UDP协议与另一个计算机上的应用程序进行通信。Socket API提供了一组函数,用于创建和管理网络套接字,以便应用程序可以通过网络发送和接收数据。Socket通常用于客户端/服务器应用程序,例如APP通过Socket连接到后端服务器实时收发数据。

WebSocket是一种在Web浏览器和Web服务器之间进行双向通信的协议。WebSocket 在 socket 基础上封装了一些与 HTTP 协议相关的内容,例如握手协议帧协议等。同时,WebSocket 还提供了一些额外的特性,例如心跳机制、Ping/Pong 消息等,以确保连接的稳定性和可靠性。

因此,WebSocket是一种特定类型的Socket,它在Web应用程序中使用,允许双向通信和服务器主动推送数据。而Socket是一种通用的网络通信API,可用于各种类型的应用程序。

如何使用 Python 实现 Web Socket?

要在 Python 中实现 Web Socket,我们可以使用 Socket.IO 库。Socket.IO 是一个跨平台的实时应用程序框架,它使得在客户端和服务器之间实现实时双向通信变得容易。在本文中,我们将使用 Flask-SocketIO 扩展来集成 Socket.IO 和 Flask。

以下是如何使用 Python 实现 Web Socket 的步骤:

步骤 1:创建 Flask 应用程序

首先,我们需要创建一个 Flask 应用程序。在这个应用程序中,我们将创建一个路由来呈现聊天室页面。聊天室页面将包含一个输入框和一个消息列表。当用户输入一条消息时,我们将使用 Web Socket 将消息发送到服务器,并将其广播到所有连接的客户端。

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    socketio.run(app)

在上面的代码中,我们创建了一个名为 app 的 Flask 应用程序,并使用 Flask-SocketIO 将其包装成一个 Socket.IO 应用程序。还定义了一个路由,用于呈现聊天室页面。

步骤 2:创建聊天室页面

然后创建一个聊天室页面。聊天室页面将包含一个输入框和一个消息列表。当用户输入一条消息时,我们将使用 Web Socket 将消息发送到服务器,并将其广播到所有连接的客户端。

<!DOCTYPE html>
<html>
<head>
    <title>Socket.IO Chat</title>
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <style>
        #messages {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <ul id="messages"></ul>
    <input id="message_input" autocomplete="off" />
    <button id="send_button">Send</button>
    <script>
        var socket = io.connect('http://' + document.domain + ':' + location.port);
        socket.on('connect', function() {
            socket.emit('my event', {data: 'I\'m connected!'});
        });
        socket.on('message', function(msg) {
            $('#messages').append($('<li>').text(msg.data));
        });
        $('#send_button').click(function(event) {
            socket.send($('#message_input').val());
            $('#message_input').val('').focus();
        });
    </script>
</body>
</html>

在上面的代码中,我们定义了一个 HTML 页面,其中包含一个消息列表、一个输入框和一个发送按钮。当用户点击发送按钮时,我们使用 Web Socket 将消息发送到服务器,并将其广播到所有连接的客户端。

步骤 3:实现 Web Socket 服务器

在服务器端,监听 Web Socket 连接,并在收到消息时将其广播给所有连接的客户端。

@socketio.on('message')
def handle_message(message):
    print('received message: ' + message)
    send(message, broadcast=True)

在上面的代码中,我们使用 Flask-SocketIO 的 socketio.on 装饰器监听名为 message 的事件,并在收到消息时将其广播给所有连接的客户端。

步骤 4:启动应用程序

在命令行中运行以下命令:

python app.py

现在,您可以在浏览器中访问 http://localhost:5000,进入聊天室页面。当您输入一条消息并点击发送按钮时,它将被发送到服务器,并将其广播给所有连接的客户端。

技术总结

本文介绍了如何使用 Python 和 Flask-SocketIO 实现 Web Socket,并创建了一个实时聊天室应用程序。Web Socket 是一种在单个 TCP 连接上进行全双工通信的协议,它使得在客户端和服务器之间实现实时双向通信变得容易。

使用 Flask-SocketIO,我们可以很简单地将 Socket.IO 集成到 Flask 应用程序中,并实现实时双向通信。通过使用 Socket.IO,我们可以在浏览器和服务器之间创建实时的交互式 Web 应用程序。

 

如果文章对你有所帮助,欢迎点赞收藏转发,感谢🙏

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

到了这里,关于Python web实战 | 使用 Flask 实现 Web Socket 聊天室的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于Python web的多人聊天室

              本文介绍了基于即时通讯的Python实现web版多人聊天室的设计和实现。这个系统利用了多种先进的技术,如Django、Channels、WebSocket,来实现即时通信,并利用MySQL和Redis作为数据库,同时还采用了多种前端技术,如bootstrap、CSS、html和js,来提供出色的用户体验。该系

    2024年02月16日
    浏览(27)
  • 使用Python + Flask搭建web服务

    示例脚本 运行脚本 在浏览器上校验 在浏览器地址栏输入URL和定义的路径,回车请求,校验响应数据是否正确。 也可使用Python-requests库请求回调测试 运行脚本

    2024年02月14日
    浏览(32)
  • Python Web框架 Flask 安装、使用

    Python Web框架 Flask 安装 安装 Flask 框架 首先需要安装 Flask 框架, 可以通过以下命令安装: 创建 Flask 应用程序 在本地创建一个文件夹,例如叫 myapp ,在该文件夹中创建一个 Python 文件 app.py ,并在其中编写以下代码: 在上面的代码中,我们导入 Flask 框架,并创建了一个名为 ap

    2024年02月17日
    浏览(33)
  • python 使用socket制作聊天室-(附带 源码 可以直接运行)

    为什么socket能做聊天室呢 socket提供了通信的服务 比如你可以创建tcp udp的请求 向某个主机发起通信 就像是你想和某人说话 你得会发音 就是提供了服务端的方式和客户端的方式 服务端处理用户发起的请求 客户端发送数据和接收服务端的响应数据 就像你打开浏览器看视频 你

    2024年02月08日
    浏览(31)
  • Python-Web框架flask使用

    目录 1.Web框架 1.1 flask 1.1.1 debug调试  1.1.2 定义参数web服务 获取字符串 ​编辑 1.1.3 html网页渲染 1.13.1 带参数传给网页文件 普通元素 列表元素  字典元素 python的web框架,目录结构如下: 1.static存放的是css,js的样式文件 2.templates存放的是html文件 3.app.py是主要接口入口,默认创

    2024年02月16日
    浏览(41)
  • 【100天精通python】Day50:python web编程_web框架,Flask的使用

    目录 1 Web 框架 2 python 中常用的web框架 3 Flask 框架的使用 3.1 Flask框架安装 3.2 第一个Flask程序 3.3 路由 3.3.1 基本路由

    2024年02月10日
    浏览(35)
  • 【小沐学Python】Python实现Web服务器(Flask框架扩展:Flask-Admin)

    flask作为一个微框架,Flask 允许您以很少的开销构建 Web 服务。 它为您(设计师)提供了自由,以适合您的方式实施您的项目 特定应用。 一个最小的 Flask 应用如下: Flask-Admin是一个batteries-included,易于使用的Flask扩展,可让您 向 Flask 应用程序添加管理界面。它的灵感来自 d

    2024年02月02日
    浏览(66)
  • 【100天精通Python】Day49:Python Web编程_Web框架,Flask框架从安装到使用

    目录 1 Web 框架 2 python 中常用的web框架 3 Flask 框架的使用 3.1 Flask框架安装 3.2 第一个Flask程序 3.3 路由 3.3.1 基本路由

    2024年02月09日
    浏览(37)
  • 【小沐学Python】Python实现Web服务器(Flask打包部署上线)

    🍺基于Python的Web服务器系列相关文章编写如下🍺: 🎈【Web开发】Python实现Web服务器(Flask快速入门)🎈 🎈【Web开发】Python实现Web服务器(Flask案例测试)🎈 🎈【Web开发】Python实现Web服务器(Flask部署上线)🎈 🎈【Web开发】Python实现Web服务器(Tornado入门)🎈 🎈【Web开

    2024年02月12日
    浏览(36)
  • Python Flask Web开发二:数据库创建和使用

    数据库在 Web 开发中起着至关重要的作用。它不仅提供了数据的持久化存储和管理功能,还支持数据的关联和连接,保证数据的一致性和安全性。通过合理地设计和使用数据库,开发人员可以构建强大、可靠的 Web 应用程序,满足用户的需求。这里介绍:SQLAlchemy 安装pymysql和

    2024年02月10日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包