烧瓶中的 websockets - TypeScript (1)

📌 相关文章

📜 烧瓶中的 websockets - TypeScript (1)

📅 最后修改于: 2023-12-03 15:27:04.748000 🧑 作者: Mango

烧瓶中的 Websockets - TypeScript

WebSocket 是一种先进的网络通信协议，它可以在客户端和服务器之间建立持久连接，实现实时的双向通信。本文介绍如何在烧瓶（Flask）中使用 WebSocket，并使用 TypeScript 进行开发。

安装依赖

首先需要安装 Flask 和 Flask-SocketIO：

pip install flask flask-socketio

然后安装 TypeScript 和相关依赖：

npm install --save-dev typescript ts-node @types/node @types/socket.io-client socket.io-client

创建后端应用

在 Python 代码（app.py）中，我们需要导入 Flask 和 Flask-SocketIO，然后创建应用并启用 SocketIO 扩展：

from flask import Flask, render_template
from flask_socketio import SocketIO

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

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

接下来，我们需要定义一个事件处理程序，来处理客户端发来的消息。在这个示例中，我们定义了一个名为 'message' 的事件：

@socketio.on('message')
def handle_message(message):
    print('received message: ' + message)
    socketio.emit('message', message)

这个处理程序将打印收到的消息并将其广播回客户端。

最后，在 Flask 应用中添加一个路由来加载客户端代码：

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

创建前端应用

在 TypeScript 代码中，我们需要导入必要的模块：

import * as io from 'socket.io-client';

然后创建一个 Socket.IO 客户端实例，并连接到服务器：

const socket = io();

socket.on('connect', () => {
    console.log('connected to server');
});

socket.on('disconnect', () => {
    console.log('disconnected from server');
});

现在我们已经和服务器连接了，接下来我们需要发送消息给服务器：

socket.emit('message', 'hello from client');

最后，我们需要处理从服务器接收到的消息：

socket.on('message', (message: string) => {
    console.log('received message: ' + message);
});

完整代码

下面是完整的示例代码：

# app.py

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')


@socketio.on('message')
def handle_message(message):
    print('received message: ' + message)
    socketio.emit('message', message)


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

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket Example</title>
</head>
<body>
    <script src="https://cdn.socket.io/socket.io-3.0.4.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

// app.ts

import * as io from 'socket.io-client';

const socket = io();

socket.on('connect', () => {
    console.log('connected to server');
});

socket.on('disconnect', () => {
    console.log('disconnected from server');
});

socket.emit('message', 'hello from client');

socket.on('message', (message: string) => {
    console.log('received message: ' + message);
});

总结

在本文中，我们介绍了如何在 Flask 应用中使用 WebSocket，并使用 TypeScript 进行开发。WebSocket 是一种强大的实时通信协议，它可以用于构建实时聊天应用、实时多人游戏等应用程序。如果您有更多关于 WebSocket 的疑问或建议，请随时在评论区留言，谢谢！