http://localhost:8080/chats/1
http://localhost:8080/chats/1
房间号相同的人能聊天
Flask Server
# -*- coding: utf-8 -*-from flask import Flask, render_templatefrom flask_socketio import SocketIO, roomsapp = 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:
ISSUE
- 走Reids 队列时hang住
- 房间号socket.io 没找到函数原型，不知道怎么调，走了个取巧的方式。
实现websocket多人聊天，很简单
原文地址：http://blog.51cto.com/cwtea/2066342