Insert "beforeend" with htmx and server-sent events? - server-sent-events

I'm using htmx 1.6.1 and I'm experimenting with the server-sent events support. I'm implementing a simple chat, and when a user posts a message I want this message to be sent to all chat participants. Thus when I receive a new message on the server I convert it into an HTML fragment and send it over the SSE connection to each client. For example, when the chat page loads it returns this HTML with all the chat messages:
<ul hx-sse="connect:/chat" ...>
<li>john: Chat message 1</li>
<li>jane: Chat message 2</li>
</ul>
Now if "john" posts another message, like "hello", to some resource
then I want to send <li>john: hello</li> over SSE to each client resulting in this HTML:
<ul hx-sse="connect:/chat" ...>
<li>john: Chat message 1</li>
<li>jane: Chat message 2</li>
<li>john: hello</li>
</ul>
But I don't know how to do this. I've managed to trigger a GET to the server after the SSE event is received by the client to fetch the entire "ul" again, but this is not what I want to do. (What I think) I want to do is to insert the content of the SSE event "beforeend" of the "ul" tag, without making an additional request to the server.
How can I achieve this?

Check out the answer to this question:
https://stacko...sent-event-sse-with-htmx-and-append-to-a-table
It's about inserting a new row in a table. In short: the server sends json. The client uses a template to insert the json into the table as a row.
If you change your mind and the server only sends an id and the HTML to be inserted is to be generated on the server side and retrieved with a get request, then see the answer to this question
https://stacko...mx-get-from-an-sse-event-which-itself-triggers-the-hx-get-c

Related

How to send (pre defined) message to telegram with hyperlink from webpage

I like to send a pre defined text to my telegram bot with a hyperlink from my website.
It's kind of a song on request system what I am trying to make from my website
<a href="https://t.me/share/url?url=Ring of Fire by Johnny Cash" (This works but is not addressed to a user id or botname)
https://api.telegram.org/bot[Bot-Api-code]/sendMessage?chat_id=[#......]&text=[test]
https://t.me/bot[Bot-Api-code]/sendMessage?chat_id=[#......]&text=[test]

Telegram bot deep linking and scrolling to certain message

I've created a telegram bot and have many messages in the chat, I want to programmatically scroll to a certain message inside the chat, for example I want to have a link deep linked to a message in the chat so when I click on the link I would see the message in the chat but for some reason it's not working. Lookhing through the documentation this should do the trick
t.me/c/chat_id/message_id
Or
tg://openmessage?user_id=xxxchat_id=xxx&message_id=xxx
Unfortunately none of these work for me, does any one know what I'm doing wrong?
The t.me/c format can only be used to link to a channel post, try the following steps to 'create a link';
Create new Channel
'Post' a message
Right click on the message -> 'Copy Post Link'
This will give you the following link: https://t.me/<channel_name>/<message_id>
This 'linking' does not work for private chats/groups. The only way I've managed to link to such a sort message is by sending a requglar sendMessage() with a reply_to_message_id_ so you can press that message, and telegram will show the 'quoted' message!

How to refer to a user in chat with their UIDs?

I have an array of User IDs which I've set as admins and I would like to print them to clients when they call the /admins command.
The main issue is that I couldn't see or find a way to print a placeholder entity (it's mention in this case) which opens a chat window with the IDs I've specified.
Remember that when you post #username in a chat, Telegram simply binds it as a mention to the referenced user and it jumps on a chat window when you click on it. I wonder if there is an equivalent for #123456789, where the number represents the User ID.
if you create/send a message from a bot, you can set parse_mode to HTML, then send text/caption with HTML anchor tag same this:
for contact me, just click here
but if you want to send message as user, you can just use userName prefixed by #, and creating manual link to tg://user?id=123 or type plain text like tg://user?id=123, don't work in Telegram now. yes; just in iOS (less than 15% of Telegram user) that work since 2013!

How do I embed a link to a reply in a telegram message?

I am trying to build a bot that sends messages which embed a couple of standard replies which can be sent just by tapping on them.
Each link would contain a space - e.g. "/ack 20134" & "/pass 20134"
So tapping on the first link causes the text "/ack 20134" to be sent back to the bot.
How do I embed this into the message that I send from the bot to the client in text, HTML or Markup?
set that element (button text for example) text field to "/ack 20134" .Then when user hit the button this command will send to your bot. you can use inline keyboards and set its data incallback_data to this value. But you cannont use it a text message because space separates two fields(embeds just "/ack" i.e. command part. user can hit it but your bot just receives "/ack".)
For text messages there is another option: do not use space(e.g. "/ack20134" without space) and your bot's would receive "/ack20134", then you must parse commands part)

Get a song datas and put it in a share button

<ul id="audio-player-playlist">
<li class="playlist_item" data-song_title="title" data-song_artwork="" data-song_file="http://example.com/mysong.mp3" data-song_artist="Artist"></li>
<li class="playlist_item" data-song_title="title" data-song_artwork="" data-song_file="http://example.com/mysong.mp3" data-song_artist="Artist"></li>
<li class="playlist_item current" data-song_title="title" data-song_artwork="" data-song_file="http://example.com/mysong.mp3" data-song_artist="Artist"></li>
</ul>
This is the list generated by my audio player. When I click play, the playlist_item_current class is added to the song that's playing.
The thing is I want the users the be able to share the song playing. How can I get the current song's data and put it in my share button?
I suspect that the music player you are using is created in javascript & you probably are already using jQuery as well so in that case:
in jQuery you can easily do the following to retreive the songname from the currently playing song:
$('.playlist_item.current').data('song_title');
For the artist:
$('.playlist_item.current').data('song_artist');
These functions would return the necessary data.

Resources