先展示代码

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Websocket客户端</title>
</head>
<body>
<label for="box">请输入要发送的内容:</label>
<input type="text" id="box">
<button onclick="send_message()">发送</button>
<script>
  // 与服务器约定的连接以及端口
  const websocket = new WebSocket('ws://127.0.0.1:8080/');

  // 连接成功建立的回调方法
  websocket.onopen = function(){
    console.log("websocket连接成功");
  };

  // 接受到消息的回调方法
  websocket.onmessage = function(event) {
    console.log(event.data);
  }

  // 连接发生错误的回调方法
  websocket.onerror = function() {
    console.log('WebSocket连接发生错误');
  };

  // 连接关闭的回调方法
  websocket.onclose = function(){
    console.log('WebSocket连接关闭');
  };

  function send_message(){
    let text = document.getElementById('box').value
    websocket.send(text);
  }
</script>

</body>
</html>

后端代码

import asyncio
import websockets


async def echo(websocket):
    # 使用websocket在客户端和服务器之间建立全双向连接后，就可以在连接打开是调用send()方法
    message = 'hello world'
    await websocket.send(message)
    return True


async def recv_msg(websocket):
    # 接受数据
    while True:
        recv_text = await websocket.recv()
        print(recv_text)


async def main_logic(websocket):
    await echo(websocket)
    await recv_msg(websocket)


start_server = websockets.serve(main_logic, '127.0.0.1', 8080)
loop = asyncio.get_event_loop()  # 获取事件循环
loop.run_until_complete(start_server)  # 运行服务

# 创建一个连接对象之后，需要不断监听返回的数据，则调用run_forever方法，要保持长连接即可
loop.run_forever()

1，通过html代码打开网页

随便点击一个浏览器的按钮打开

2.打开控制台，运行后端代码

3，点击刷新

随便发送一个内容，就会在后端看到结果

# 爬虫 # python # websocket
Logo
智能体开发者社区

中国智能体开发者社区，聚焦智能体与大模型开发，提供前沿资讯、实用工具链、开源项目及行业案例。通过技术沙龙、开发者大赛等活动，促进经验交流与协作，助力开发者快速构建创新智能应用。

更多推荐

cover

22道AI Agent 工程师必会的面试题，别啥都不会就出去找工作

avatar 智能体开发者社区
cover

基于AI agent的智能图书馆

avatar 智能体开发者社区
cover

AI Agent 自动化安全审计实战：基于 LangChain 打造智能化漏洞扫描助手

avatar 智能体开发者社区