天天看點

html實作網頁多人聊天,實作websocket多人聊天,很簡單(示例代碼)沒有任何消息..

go?

房間号相同的人能聊天

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/‘)

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

Python Chat App Yo

integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

div.msg_bbl {

background-color: #ddd;

padding: 5px 10px;

border-radius: 10px;

color: #555;

margin-bottom: 5px;

}

WebScoket APP test.

沒有任何消息..

輸入你的消息并發送

Send

// 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 = ‘

‘ + data.username+ ‘

‘ +data.message+ ‘ ‘;

$(‘div.message_holder‘).append(text);

});

example:

html實作網頁多人聊天,實作websocket多人聊天,很簡單(示例代碼)沒有任何消息..

ISSUE

走Reids 隊列時hang住

房間号socket.io 沒找到函數原型,不知道怎麼調,走了個取巧的方式。