LeonMMcoset/leonwww
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add support for websockets with messages to network tab

Browse Source
This commit is contained in:
Aidan
2025-09-11 11:34:44 -05:00
parent 02c03473f3
commit 1835702daa
5 changed files with 389 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
flumi/Scripts/Browser/NetworkTab.gd
View File

@@ -11,6 +11,7 @@ const NetworkRequestItemScene = preload("res://Scenes/NetworkRequestItem.tscn")
@onready var headers_tab: VBoxContainer = $MainContainer/RightPanel/PanelContainer/HBoxContainer/TabContainer/Headers
@onready var preview_tab: Control = $MainContainer/RightPanel/PanelContainer/HBoxContainer/TabContainer/Preview
@onready var response_tab: Control = $MainContainer/RightPanel/PanelContainer/HBoxContainer/TabContainer/Response
@onready var messages_tab: Control = $MainContainer/RightPanel/PanelContainer/HBoxContainer/TabContainer/Messages
# Header components
@onready var status_header: Label = %StatusHeader
@@ -31,7 +32,7 @@ const NetworkRequestItemScene = preload("res://Scenes/NetworkRequestItem.tscn")
@onready var syntax_highlighter = preload("res://Resources/LuaSyntaxHighlighter.tres")
var network_requests: Array[NetworkRequest] = []
var current_filter: NetworkRequest.RequestType = -1 # -1 means all
var current_filter: int = -1 # -1 means all, otherwise NetworkRequest.RequestType
var selected_request: NetworkRequest = null
var request_items: Dictionary = {}
@@ -66,7 +67,7 @@ func apply_filter():
for request in network_requests:
var item = request_items.get(request.id)
if item:
var should_show = (current_filter == -1) or (request.type == current_filter)
var should_show = (current_filter == -1) or (int(request.type) == current_filter)
item.visible = should_show
func update_request_item(request: NetworkRequest):
@@ -76,6 +77,9 @@ func update_request_item(request: NetworkRequest):
request_item.update_display()
if selected_request == request and details_panel.visible:
update_details_panel(request)
apply_filter()
update_status_bar()
@@ -84,11 +88,19 @@ func update_details_panel(request: NetworkRequest):
update_headers_tab(request)
update_preview_tab(request)
update_response_tab(request)
update_messages_tab(request)
if request.type == NetworkRequest.RequestType.SOCKET:
messages_tab.visible = true
details_tab_container.set_tab_title(3, "Messages (" + str(request.websocket_messages.size()) + ")")
else:
messages_tab.visible = false
func clear_details_panel():
for child in headers_tab.get_children(): child.queue_free()
for child in preview_tab.get_children(): child.queue_free()
for child in response_tab.get_children(): child.queue_free()
for child in messages_tab.get_children(): child.queue_free()
func create_collapsible_section(title: String, expanded: bool = false) -> VBoxContainer:
var section = VBoxContainer.new()
@@ -154,6 +166,17 @@ func update_headers_tab(request: NetworkRequest):
add_header_row(general_content, "Request Method:", request.method)
add_header_row(general_content, "Status Code:", str(request.status_code) + " " + request.status_text)
# WebSocket information
if request.type == NetworkRequest.RequestType.SOCKET:
var ws_section = create_collapsible_section("WebSocket Information", true)
headers_tab.add_child(ws_section)
var ws_content = ws_section.get_child(1)
add_header_row(ws_content, "WebSocket ID:", request.websocket_id)
add_header_row(ws_content, "Event Type:", request.websocket_event_type)
add_header_row(ws_content, "Connection Status:", request.connection_status)
add_header_row(ws_content, "Total Messages:", str(request.websocket_messages.size()))
# Request Headers section
if not request.request_headers.is_empty():
var request_headers_section = create_collapsible_section("Request Headers", false)
@@ -173,6 +196,32 @@ func update_headers_tab(request: NetworkRequest):
add_header_row(response_headers_content, header_name + ":", str(request.response_headers[header_name]))
func update_preview_tab(request: NetworkRequest):
if request.type == NetworkRequest.RequestType.SOCKET:
var content_to_show = ""
match request.websocket_event_type:
"connection":
content_to_show = "WebSocket connection event\n"
content_to_show += "URL: " + request.url + "\n"
content_to_show += "Status: " + request.connection_status + "\n"
if request.status_code > 0:
content_to_show += "Status Code: " + str(request.status_code) + " " + request.status_text + "\n"
content_to_show += "Messages exchanged: " + str(request.websocket_messages.size())
"close", "error":
content_to_show = "WebSocket " + request.websocket_event_type + " event\n"
content_to_show += "Status Code: " + str(request.status_code) + "\n"
content_to_show += "Reason: " + request.status_text
if not content_to_show.is_empty():
var code_edit = CodeEditUtils.create_code_edit({
"text": content_to_show,
"editable": false,
"show_line_numbers": false,
"syntax_highlighter": null
})
preview_tab.add_child(code_edit)
return
# For images, show the image in the preview tab
if request.type == NetworkRequest.RequestType.IMG and request.status == NetworkRequest.RequestStatus.SUCCESS:
var image = Image.new()
@@ -240,6 +289,42 @@ func update_preview_tab(request: NetworkRequest):
preview_tab.add_child(code_edit)
func update_response_tab(request: NetworkRequest):
if request.type == NetworkRequest.RequestType.SOCKET:
var content_to_show = ""
match request.websocket_event_type:
"connection":
content_to_show = "WebSocket Connection Details\n\n"
content_to_show += "This is a WebSocket connection request.\n"
content_to_show += "Connection Status: " + request.connection_status + "\n"
content_to_show += "WebSocket ID: " + request.websocket_id + "\n"
content_to_show += "Total Messages: " + str(request.websocket_messages.size()) + "\n"
if request.status_code > 0:
content_to_show += "Status Code: " + str(request.status_code) + " " + request.status_text + "\n"
content_to_show += "\nNote: Individual messages can be viewed in the 'Messages' tab."
"close", "error":
content_to_show = "WebSocket " + request.websocket_event_type.capitalize() + " Event\n\n"
content_to_show += "Status Code: " + str(request.status_code) + "\n"
content_to_show += "Reason: " + request.status_text + "\n"
content_to_show += "WebSocket ID: " + request.websocket_id + "\n"
content_to_show += "Total Messages Exchanged: " + str(request.websocket_messages.size())
if not content_to_show.is_empty():
var code_edit = CodeEditUtils.create_code_edit({
"text": content_to_show,
"editable": false,
"show_line_numbers": false,
"syntax_highlighter": null
})
response_tab.add_child(code_edit)
else:
var label = Label.new()
label.text = "No WebSocket data to display"
label.horizontal_alignment = HORIZONTAL_ALIGNMENT_CENTER
label.vertical_alignment = VERTICAL_ALIGNMENT_CENTER
response_tab.add_child(label)
return
if request.type == NetworkRequest.RequestType.IMG:
var label = Label.new()
label.text = "This response contains image data. See the \"Preview\" tab to view the image."
@@ -280,6 +365,156 @@ func update_response_tab(request: NetworkRequest):
response_tab.add_child(code_edit)
func update_messages_tab(request: NetworkRequest):
if request.type != NetworkRequest.RequestType.SOCKET:
return
if request.websocket_messages.is_empty():
var label = Label.new()
label.text = "No WebSocket messages yet"
label.horizontal_alignment = HORIZONTAL_ALIGNMENT_CENTER
label.vertical_alignment = VERTICAL_ALIGNMENT_CENTER
messages_tab.add_child(label)
return
var scroll_container = ScrollContainer.new()
scroll_container.size_flags_horizontal = Control.SIZE_EXPAND_FILL
scroll_container.size_flags_vertical = Control.SIZE_EXPAND_FILL
var messages_container = VBoxContainer.new()
messages_container.size_flags_horizontal = Control.SIZE_EXPAND_FILL
scroll_container.add_child(messages_container)
var header_container = VBoxContainer.new()
header_container.add_theme_constant_override("separation", 8)
var search_container = HBoxContainer.new()
search_container.add_theme_constant_override("separation", 8)
var search_label = Label.new()
search_label.text = "Search:"
search_label.add_theme_font_size_override("font_size", 11)
search_label.add_theme_color_override("font_color", Color(0.7, 0.7, 0.7, 1.0))
search_container.add_child(search_label)
var search_input = LineEdit.new()
search_input.placeholder_text = "Filter messages..."
search_input.add_theme_font_size_override("font_size", 11)
search_input.custom_minimum_size.x = 200
search_input.custom_minimum_size.y = 24
search_container.add_child(search_input)
var clear_button = Button.new()
clear_button.text = "Clear"
clear_button.add_theme_font_size_override("font_size", 10)
clear_button.custom_minimum_size.y = 24
search_container.add_child(clear_button)
header_container.add_child(search_container)
var header = Label.new()
header.text = str(request.websocket_messages.size()) + " messages"
header.add_theme_font_size_override("font_size", 13)
header.add_theme_color_override("font_color", Color(0.7, 0.7, 0.7, 1.0))
header.custom_minimum_size.y = 20
header.vertical_alignment = VERTICAL_ALIGNMENT_CENTER
header_container.add_child(header)
messages_container.add_child(header_container)
var message_rows: Array[Control] = []
var search_term = ""
var update_search = func():
var filter_text = search_input.text.to_lower()
var visible_count = 0
for row_index in range(message_rows.size()):
var row = message_rows[row_index]
var message = request.websocket_messages[row_index]
var should_show = filter_text.is_empty() or message.content.to_lower().contains(filter_text)
row.visible = should_show
if should_show:
visible_count += 1
if filter_text.is_empty():
header.text = str(request.websocket_messages.size()) + " messages"
else:
header.text = str(visible_count) + " of " + str(request.websocket_messages.size()) + " messages"
search_input.text_changed.connect(func(_text): update_search.call())
clear_button.pressed.connect(func():
search_input.text = ""
update_search.call()
)
for i in range(request.websocket_messages.size()):
var message = request.websocket_messages[i]
var message_panel = PanelContainer.new()
message_panel.custom_minimum_size.y = 24
var panel_style = StyleBoxFlat.new()
if message.direction == "sent":
panel_style.bg_color = Color(0.2, 0.3, 0.5, 0.3)
else:
panel_style.bg_color = Color(0.2, 0.5, 0.3, 0.3)
panel_style.content_margin_left = 6
panel_style.content_margin_right = 6
panel_style.content_margin_top = 2
panel_style.content_margin_bottom = 2
message_panel.add_theme_stylebox_override("panel", panel_style)
var message_row = HBoxContainer.new()
message_row.add_theme_constant_override("separation", 8)
var direction_label = Label.new()
var direction_icon = "↑" if message.direction == "sent" else "↓"
var direction_color = Color(0.7, 0.9, 1.0) if message.direction == "sent" else Color(0.7, 1.0, 0.9)
direction_label.text = direction_icon
direction_label.add_theme_font_size_override("font_size", 12)
direction_label.add_theme_color_override("font_color", direction_color)
direction_label.custom_minimum_size.x = 16
direction_label.horizontal_alignment = HORIZONTAL_ALIGNMENT_CENTER
message_row.add_child(direction_label)
var timestamp_label = Label.new()
timestamp_label.text = message.get_formatted_time()
timestamp_label.add_theme_font_size_override("font_size", 10)
timestamp_label.add_theme_color_override("font_color", Color(0.6, 0.6, 0.6, 1.0))
timestamp_label.custom_minimum_size.x = 80
message_row.add_child(timestamp_label)
var content_label = Label.new()
var content_text = message.content
if content_text.length() > 60:
content_text = content_text.substr(0, 57) + "..."
content_text = content_text.replace("\n", " ").replace("\r", " ")
content_label.text = content_text
content_label.add_theme_font_size_override("font_size", 11)
content_label.add_theme_color_override("font_color", Color(1.0, 1.0, 1.0, 1.0))
content_label.size_flags_horizontal = Control.SIZE_EXPAND_FILL
content_label.clip_contents = true
content_label.autowrap_mode = TextServer.AUTOWRAP_OFF
message_row.add_child(content_label)
var size_label = Label.new()
size_label.text = str(message.size) + "b"
size_label.add_theme_font_size_override("font_size", 10)
size_label.add_theme_color_override("font_color", Color(0.6, 0.6, 0.6, 1.0))
size_label.custom_minimum_size.x = 40
size_label.horizontal_alignment = HORIZONTAL_ALIGNMENT_RIGHT
message_row.add_child(size_label)
message_panel.add_child(message_row)
messages_container.add_child(message_panel)
message_rows.append(message_panel)
messages_tab.add_child(scroll_container)
func update_status_bar():
var total_requests = network_requests.size()
var total_size = 0