实现websocket多人聊天，很简单

最新推荐文章于 2021-06-23 12:20:40 发布

weixin_33751566

最新推荐文章于 2021-06-23 12:20:40 发布

阅读量213

点赞数

文章标签：网络 python json

本文链接：https://blog.csdn.net/weixin_33751566/article/details/85096423

版权

go?

http://localhost:8080/chats/1
http://localhost:8080/chats/1

房间号相同的人能聊天

Flask Server

# -*- coding: utf-8 -*-

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

app = Flask(__name__)
app.config['SECRET_KEY'] = 'sldjfalsfnwlemnw'

socketio = SocketIO(app)

@app.route('/chats/<int:room_id>')
def index(room_id):
    return render_template('chat.html', room_id=room_id)

@socketio.on('chat_send')
def chat_send(json):
    print 'chat_send: ', str(json)
    room_id = None
    if json.get('room_id', None):
        room_id = json['room_id']

    socketio.emit('chat_recv_{room_id}'.format(room_id=room_id), json)

if __name__ == '__main__':
    socketio.run(app, host='0.0.0.0', port=8080, debug=True)

templates/chat.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Python Chat App Yo</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>
      div.msg_bbl {
        background-color: #ddd;
        padding: 5px 10px;
        border-radius: 10px;
        color: #555;
        margin-bottom: 5px;
      }
    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <div class="text-center well"><b>WebScoket APP test.</b></div>

    <div class="container">
      <div class="col-sm-8">
        <div class="no_message">
          <h1 style='color: #ccc'>没有任何消息..</h1>
          <div class="message_holder"></div>
        </div>
      </div>
      <div class="col-sm-4">
        <form action="" method="POST">
          <b>输入你的消息并发送 <span class="glyphicon glyphicon-arrow-down"></span></b>
          <div class="clearfix" style="margin-top: 5px;"></div>
          <input type="text" class="username form-control" placeholder="User Name">
          <div style="padding-top: 5px;"></div>
          <input type="text" class="message form-control" placeholder="Messages">
          <div style="padding-top: 5px;"></div>
          <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-send"></span> Send</button>
        </form>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>

    <script>
      // 1. 监听connect事件
      var socket = io.connect('http://' + document.domain + ':' + location.port);

      socket.on('connect', function () {

          var form = $('form').on('submit' ,function (e) {
              e.preventDefault();

              // 1.1 获取对象
              let user_name = $('input.username').val();
              let message   = $('input.message').val();

              // 1.2 发送数据到socket服务器
              socket.emit('chat_send', {
                  room_id : {{ room_id }} ,
                  username : user_name,
                  message : message
              });
              $('input.message').val('').focus();
          });
      });

      // 2. 监听response事件，服务器返回数据，并更新数据
      socket.on('chat_recv_{{ room_id }}', function (data) {
          // 数据发送到聊天框
          console.log(data);
          $('h1').remove();
          let text = '<div class="msg_bbl"><b>' + data.username+ '</b> ' +data.message+ '</div>';
          $('div.message_holder').append(text);
      });

    </script>
  </body>
</html>

example:

实现websocket多人聊天，很简单

ISSUE

走Reids 队列时hang住
房间号socket.io 没找到函数原型，不知道怎么调，走了个取巧的方式。

weixin_33751566

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现websocket多人聊天，很简单

go?http://localhost:8080/chats/1http://localhost:8080/chats/1房间号相同的人能聊天Flask Server# -*- coding: utf-8 -*-from flask import Flask, render_templatefrom flask_socketio import SocketIO, roomsa...
复制链接

扫一扫