Skip to content

New sample: Newsfeed with websocket #550

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 9, 2025
Merged

New sample: Newsfeed with websocket #550

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ba28756
websocket sample
christianguenter2 Oct 8, 2025
2dac99c
cleanup
christianguenter2 Oct 9, 2025
f97afbf
Update abaplint.jsonc
oblomov-dev Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion abaplint.jsonc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
},
"dependencies": [
{
"url": "https://github.com/abapedia/steampunk-2305-api-intersect-702",
"url": "https://github.com/abaplint/deps",
"folder": "/deps",
"files": "/src/**/*.*"
},
Expand Down Expand Up @@ -34,3 +34,4 @@
"xml_consistency": true
}
}

35 changes: 35 additions & 0 deletions src/00/2fcf7ab2324262be149833ade507a2ht.sush.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<?xml version="1.0" encoding="utf-8"?>
<abapGit version="v1.0.0" serializer="LCL_OBJECT_SUSH" serializer_version="v1.0.0">
<asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
<asx:values>
<HEAD>
<NAME>2FCF7AB2324262BE149833ADE507A2</NAME>
<TYPE>HT</TYPE>
<DISPLAY_NAME>R3TR SAPC Z2UI5_SAMPLE</DISPLAY_NAME>
</HEAD>
<USOBX>
<USOBX>
<NAME>2FCF7AB2324262BE149833ADE507A2</NAME>
<TYPE>HT</TYPE>
<OBJECT>S_START</OBJECT>
<OKFLAG>X</OKFLAG>
</USOBX>
</USOBX>
<USOBX_EXT>
<item>
<OBJECT>S_START</OBJECT>
<TTEXT>Start Authorization Check for TADIR Objects</TTEXT>
<OCLSS>AAAB</OCLSS>
<OKFLAG>X</OKFLAG>
<PS_POSID>BC-SEC-AUT-CHK</PS_POSID>
<CI_TEXT>Check</CI_TEXT>
<CH_TEXT>Check</CH_TEXT>
<PR_TEXT>No</PR_TEXT>
<EXCEP>3</EXCEP>
<EXCEP_TX>Okay</EXCEP_TX>
<EXCEP_ICON>@08@</EXCEP_ICON>
</item>
</USOBX_EXT>
</asx:values>
</asx:abap>
</abapGit>
204 changes: 204 additions & 0 deletions src/00/z2ui5_cl_demo_app_352.clas.abap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
CLASS z2ui5_cl_demo_app_352 DEFINITION PUBLIC.

PUBLIC SECTION.

TYPES:
BEGIN OF t_news,
text TYPE string,
author TYPE string,
END OF t_news,
tt_News TYPE STANDARD TABLE OF t_news
WITH NON-UNIQUE DEFAULT KEY.

INTERFACES z2ui5_if_app.
DATA news_input TYPE string.
DATA author_input TYPE string.
DATA news_list TYPE tt_News.
DATA connections TYPE int8.

PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.

METHODS z2ui5_on_event.
METHODS z2ui5_on_render.

PRIVATE SECTION.

METHODS distribute_news
IMPORTING
i_news TYPE z2ui5_cl_demo_app_352=>t_news.
METHODS z2ui5_display_popover.

ENDCLASS.


CLASS z2ui5_cl_demo_app_352 IMPLEMENTATION.


METHOD z2ui5_if_app~main.

me->client = client.

IF me->z2ui5_if_app~check_initialized = abap_false.
connections = z2ui5_cl_demo_app_352_ws=>get_active_connections( ).
ENDIF.

IF client->get( )-event IS NOT INITIAL.
z2ui5_on_event( ).
client->view_model_update( ).
RETURN.
ENDIF.

z2ui5_on_render( ).

ENDMETHOD.


METHOD z2ui5_on_event.
DATA: news TYPE z2ui5_cl_demo_app_352=>t_news.

CASE client->get( )-event.
WHEN `SEND`.

news = VALUE t_news( text = news_input
author = author_input ).
distribute_news( news ).

CLEAR: news_input.

WHEN `CLEAR`.

CLEAR: news_list.

WHEN 'BACK'.

client->nav_app_leave( client->get_app( client->get( )-s_draft-id_prev_app_stack ) ).

WHEN 'CLICK_HINT_ICON'.

z2ui5_display_popover( ).

ENDCASE.

ENDMETHOD.


METHOD z2ui5_on_render.

DATA(view) = z2ui5_cl_xml_view=>factory( ).
DATA(page) = view->shell(
)->page(
title = 'abap2UI5 - Sample: News Feed over WebSocket'
navbuttonpress = client->_event( 'BACK' )
shownavbutton = xsdbool( client->get( )-s_draft-id_prev_app_stack IS NOT INITIAL ) ).

page->header_content(
)->button( id = `button_hint_id`
icon = `sap-icon://hint`
tooltip = `Sample information`
press = client->_event( 'CLICK_HINT_ICON' ) ).

DATA(form) = page->simple_form( editable = abap_true
title = `Publish news`
class = `sapUiTinyMarginBottom`
)->content( `form` ).

form->feed_input(
value = client->_bind_edit( news_input )
post = client->_event( 'SEND' ) ).

form->label( text = `Author`
)->input( value = client->_bind_edit( author_input )
placeholder = `Anonymous` ).

page->list(
headertext = `News`
items = client->_bind_edit( news_list )
)->feed_list_item(
sender = `{AUTHOR}`
text = `{TEXT}`
showicon = abap_false ).

DATA(footer) = page->footer( )->overflow_toolbar( ).
footer->info_label(
text = client->_bind_edit( connections )
colorscheme = `7`
icon = `sap-icon://connected` ).

footer->toolbar_spacer( )->button(
text = `Clear`
icon = `sap-icon://clear-all`
press = client->_event( `CLEAR` ) ).

IF me->z2ui5_if_app~check_initialized = abap_false.
view->_generic( name = `script`
ns = `html`
)->_cc_plain_xml(
`(()=>{ ` &&
` const ws_url = (window.location.origin + '/sap/bc/apc/sap/z2ui5_sample').replace('http','ws');` &&
` try { ` &&
` ws = new WebSocket(ws_url);` &&
` } catch (err) {` &&
` alert(err);` &&
` }` &&
` ws.onopen = ()=>{};` &&
` ws.onmessage = (msg)=>{` &&
` const model = z2ui5.oController.oView.getModel();` &&
` const data = model.getData();` &&
` if (msg.data === '` && z2ui5_cl_demo_app_352_ws=>c_msg-__new_connection__ && `') {` &&
` data.XX.CONNECTIONS += 1;` &&
` } else if (msg.data === '` && z2ui5_cl_demo_app_352_ws=>c_msg-__closed__ && `') {` &&
` data.XX.CONNECTIONS -= 1;` &&
` } else {` &&
` data.XX.NEWS_LIST.push(JSON.parse(msg.data).NEWS_ITEM);` &&
` }` &&
` model.setData(data);` &&
` };` &&
` ws.onclose = (msg)=>{};` &&
`})()` ).
ENDIF.

client->view_display( view->stringify( ) ).

ENDMETHOD.



METHOD distribute_news.

IF i_news-text IS INITIAL.
RETURN.
ENDIF.

TRY.
INSERT i_news INTO TABLE news_list.

z2ui5_cl_demo_app_352_ws=>send( z2ui5_cl_ajson=>create_empty( ii_custom_mapping = z2ui5_cl_ajson_mapping=>create_upper_case( )
)->set( iv_path = `NEWS_ITEM`
iv_val = i_news
)->stringify( ) ).

CATCH cx_root INTO DATA(error).
RAISE SHORTDUMP error.
ENDTRY.

ENDMETHOD.


METHOD z2ui5_display_popover.

DATA(view) = z2ui5_cl_xml_view=>factory_popup( ).
view->quick_view( placement = `Bottom`
width = `auto`
)->quick_view_page( pageid = `sampleInformationId`
header = `Sample information`
description = `This sample show how to consume APC-Messages over websocket. Open the app mutliple times and post something.` ).

client->popover_display(
xml = view->stringify( )
by_id = `button_hint_id` ).

ENDMETHOD.

ENDCLASS.

16 changes: 16 additions & 0 deletions src/00/z2ui5_cl_demo_app_352.clas.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<abapGit version="v1.0.0" serializer="LCL_OBJECT_CLAS" serializer_version="v1.0.0">
<asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
<asx:values>
<VSEOCLASS>
<CLSNAME>Z2UI5_CL_DEMO_APP_352</CLSNAME>
<LANGU>E</LANGU>
<DESCRIPT>News Feed over Websocket</DESCRIPT>
<STATE>1</STATE>
<CLSCCINCL>X</CLSCCINCL>
<FIXPT>X</FIXPT>
<UNICODE>X</UNICODE>
</VSEOCLASS>
</asx:values>
</asx:abap>
</abapGit>
105 changes: 105 additions & 0 deletions src/00/z2ui5_cl_demo_app_352_ws.clas.abap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
CLASS z2ui5_cl_demo_app_352_ws DEFINITION PUBLIC
INHERITING FROM cl_apc_wsp_ext_stateless_base.

PUBLIC SECTION.

CLASS-METHODS:
send
IMPORTING
i_message TYPE string
RAISING
cx_amc_error,

get_active_connections
RETURNING
VALUE(result) TYPE i.

METHODS:
if_apc_wsp_extension~on_message REDEFINITION,
if_apc_wsp_extension~on_start REDEFINITION,
if_apc_wsp_extension~on_close REDEFINITION.

CONSTANTS:
c_amc_application_id TYPE amc_application_id VALUE 'Z2UI5_SAMPLE' ##NO_TEXT,
c_channel_id TYPE amc_channel_id VALUE '/news_feed' ##NO_TEXT,
BEGIN OF c_msg,
__new_connection__ TYPE string VALUE `__NEW_CONNECTION__` ##NO_TEXT,
__closed__ TYPE string VALUE `__CLOSED__` ##NO_TEXT,
END OF c_msg.

PRIVATE SECTION.

CLASS-METHODS:
get_producer
RETURNING
VALUE(producer) TYPE REF TO if_amc_message_producer_text
RAISING
cx_amc_error.

ENDCLASS.


CLASS z2ui5_cl_demo_app_352_ws IMPLEMENTATION.


METHOD get_producer.

producer ?= cl_amc_channel_manager=>create_message_producer( i_application_id = c_amc_application_id
i_channel_id = c_channel_id ).

ENDMETHOD.


METHOD if_apc_wsp_extension~on_message.

ENDMETHOD.


METHOD if_apc_wsp_extension~on_start.

TRY.

i_context->get_binding_manager(
)->bind_amc_message_consumer( i_application_id = c_amc_application_id
i_channel_id = c_channel_id ).

get_producer( )->send( c_msg-__new_connection__ ).

CATCH cx_root INTO DATA(error).
RAISE SHORTDUMP error.
ENDTRY.

ENDMETHOD.


METHOD if_apc_wsp_extension~on_close.

TRY.
get_producer( )->send( c_msg-__closed__ ).

CATCH cx_root INTO DATA(error).
RAISE SHORTDUMP error.
ENDTRY.

ENDMETHOD.


METHOD get_active_connections.

SELECT
FROM amc_receiver2
FIELDS COUNT( * )
WHERE channel_id = @( to_lower( |{ c_amc_application_id }{ c_channel_id }| ) )
INTO @result.

ENDMETHOD.


METHOD send.

get_producer( )->send( i_message ).

ENDMETHOD.

ENDCLASS.

16 changes: 16 additions & 0 deletions src/00/z2ui5_cl_demo_app_352_ws.clas.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<abapGit version="v1.0.0" serializer="LCL_OBJECT_CLAS" serializer_version="v1.0.0">
<asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
<asx:values>
<VSEOCLASS>
<CLSNAME>Z2UI5_CL_DEMO_APP_352_WS</CLSNAME>
<LANGU>E</LANGU>
<DESCRIPT>Generated APC WebSocket protocol impementation class</DESCRIPT>
<STATE>1</STATE>
<CLSCCINCL>X</CLSCCINCL>
<FIXPT>X</FIXPT>
<UNICODE>X</UNICODE>
</VSEOCLASS>
</asx:values>
</asx:abap>
</abapGit>
Loading
Loading