Deleting a record from extend with JavaScript does not trigger frontend realtime event #3695

kidino · 2023-11-06T15:14:23Z

kidino
Nov 6, 2023

I use the backend extend with JavaScript onRealtimeDisconnectRequest hook to delete a record from a collection. I test it by reloading the browser. On the terminal, I see that the onRealtimeDisconnectRequest does trigger.

On the frontend, I have the pb subscribed to the related collection. However, after deleting the record in the onRealtimeDisconnectRequest, on the frontend, I don't get a delete realtime notification.

Is that the normal case?

Answered by ganigeorgiev

Nov 6, 2023

Raw DB queries don't trigger the realtime events.
They are triggered only when the onModel* hooks are fired, eg. when the related $app.dao().saveRecord() or $app.dao().deleteRecord() method is called.

In the onRealtimeDisconnectRequest hook try to replace your delete query with:

const record = $app.dao().findFirstRecordByData("active_mouse", "realtime_id", e.client.id());
$app.dao().deleteRecord(record);

View full answer

ganigeorgiev · 2023-11-06T15:36:32Z

ganigeorgiev
Nov 6, 2023
Maintainer

It is not normal but there are not enough details to help you debug it.

Did you subscribe to the * topic or to a specific record?
Does the client satisfies the List API rule (for the * topic) or the View API rule of the collection (for a specific record subscription)?
How did you actually delete the record, could you provide a code sample?

If you think that it is a bug with PocketBase, please create a miminal reproducible repo and I'll try to investigate it in more details.

0 replies

kidino · 2023-11-06T16:39:58Z

kidino
Nov 6, 2023
Author

I am justing testing out the realtime DB feature. My PoC is where visitors will be able to enter their name and a pointer instance will be added to the screen and in the active_mouse collection. This is my collection definition.

Then, every mouse movement will trigger collection update, based on the pb.realtime.clientId

Just for PoC, I made all rules public.

This is my main.pb.js

onRealtimeDisconnectRequest((e) => {
    console.log('DISCONNECT')
    console.log(e.httpContext)
    console.log(e.client.id())

    $app.dao().db()
    .newQuery("DELETE FROM active_mouse WHERE realtime_id = {:realtime_id}")
    .bind({"realtime_id": e.client.id()})
    .execute() // throw an error on db failure      
})

This is my index.html in the pb_public folder

<!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.0">
    <title>Document</title>
    <style>
        .pointer {
            position: absolute;
            height: 30px; line-height: 30px;
            padding: 0 10px;
            border-radius: 10px;
            text-transform: uppercase;
            font-family: Arial, Helvetica, sans-serif;
        }

        #pending {
            display: none;
        }

        #remove {
            display: none;
        }
    </style>
</head>

<body>
    <!-- <div class="pointer" style="top: 0; left: 300px; color: #fff; background-color:darkorchid">DINO</div> -->

    <div id="user-info">
        <input type="text" id="name" minlength="1" maxlength="10">
        <button id="add-my-pointer" >Add My Mouse</button>
    </div>

    <div id="pending">
        please wait...
    </div>

    <div id="remove">
        <button id="remove-my-mouse">Remove My Mouse</button>
    </div>
    <script type="module">
        import PocketBase from '/js/pocketbase/pocketbase.es.mjs'
    
        const pb = new PocketBase('http://localhost:8090');
    
        const courses = await pb.collection('active_mouse').getList(1,1000,{})

        document.onmousemove = handleMouseMove;

        document.getElementById('add-my-pointer').addEventListener('click',function(){
            addMyMouse()
        });
        
        document.getElementById('remove-my-mouse').addEventListener('click',function(){
            removeMyMouse()
        });

        window.addEventListener('unload', function(){
            removeMyMouse()
        })

        let mymouse = null;
        let my_record = '';

        let conn = pb.collection('active_mouse').subscribe('*', function(e){
            console.log(e.action+' - '+e.record.realtime_id)
            switch(e.action) {
                case 'create' : 
                    // -- skips create. new visitor mouse pointer will be
                    // discovered from update
                    break
                case 'update' : 
                    movePointer(e.record);
                    break 
                case 'delete' : 
                    removeMouse(e.record);
                    break
            }
        })        

        async function removeMyMouse() {
            if (mymouse !== null) {
                mymouse.parentNode.removeChild(mymouse);

                const myinfo = document.getElementById('user-info');
                myinfo.style = 'display: block';
                const d = document.getElementById('pending');
                d.style = 'display: none;'
                const e = document.getElementById('remove');
                e.style = 'display: none;'
                document.getElementsByTagName("body")[0].style = 'cursor : auto';

                await pb.collection('active_mouse').delete(my_record.id);
                document.getElementsByTagName("body")[0].style = 'cursor : default';

                mymouse = null;
            }
        }

        async function addMyMouse() {
            let name = document.getElementById('name').value;

            my_record = await pb.collection('active_mouse').create({
                name: name,
                realtime_id: pb.realtime.clientId, 
                color: getRandomColor() 
            })

            myMouseAdded(my_record)
        }

        function removeMouse(record) {
            let pointer = document.getElementById('pointer-'+record.realtime_id);
            pointer.parentNode.removeChild(pointer);
        }

        function myMouseAdded(record) {

            let myinfo = document.getElementById('user-info');
            myinfo.style = 'display: none';
            let d = document.getElementById('pending');
            d.style = 'display: none;'
            let e = document.getElementById('remove');
            e.style = 'display: block;'

            document.getElementsByTagName("body")[0].style = 'cursor : none';

            mymouse = createPointer( my_record.realtime_id, my_record.color, my_record.name )
        }

        async function handleMouseMove(event) {
            // console.log(mymouse)
            if ((mymouse !== null))  {
                mymouse.style = "background-color:"+ mymouse.getAttribute('data-bg-color') + ";"
                            +"color:"+ mymouse.getAttribute('data-fg-color') +";" 
                            +"left:"+ event.pageX +"px;" 
                            +"top:"+ event.pageY +"px;";

                const record = await pb.collection('active_mouse').update(my_record.id, {
                    pos_x: event.pageX,
                    pos_y: event.pageY
                });
            }
        }

        function createPointer(id, color, name) {

            let fontcolor = getFontColor(color);

            let g = document.createElement('div');
                g.setAttribute("class", "pointer");
                g.setAttribute("id", "pointer-" + id);
                g.setAttribute("data-bg-color", color);
                g.setAttribute("data-fg-color", fontcolor);
                g.innerText = name;
                document.body.appendChild(g);
            return document.querySelector("#pointer-" + id);
        }

        function movePointer(record) {
            let pointer = document.querySelector("#pointer-" + record.realtime_id);
            if (pointer === null) { // new visitor mouse pointer discovered
                pointer = createPointer(record.realtime_id, record.color, record.name);
            }

            // skip own mouse pointer
            if(record.realtime_id != my_record.realtime_id) {
                pointer.style = "background-color:"+ pointer.getAttribute('data-bg-color') + ";"
                            +"color:"+ pointer.getAttribute('data-fg-color') +";" 
                            +"left:"+ record.pos_x +"px;" 
                            +"top:"+ record.pos_y +"px;";
            }
        }

        function getFontColor(bgColor) {
            let rc = parseInt(bgColor.substring(1,3), 16);
            let gc = parseInt(bgColor.substring(3,5), 16);
            let bc = parseInt(bgColor.substring(5,7), 16);

            let luminance =  ( 0.299 * rc + 0.587 * gc + 0.114 * bc)/255;
            let fontcolor = '#ffffff';
            if (luminance > 0.5) {
                fontcolor = '#000000';
            }
            return fontcolor;
        }

        function getRandomColor() {
            // Generate random values for red, green, and blue components
            let red = Math.floor(Math.random() * 256);
            let green = Math.floor(Math.random() * 256);
            let blue = Math.floor(Math.random() * 256);

            // Convert the values to hexadecimal and format the color code
            let colorCode = `#${red.toString(16)}${green.toString(16)}${blue.toString(16)}`;

            return colorCode;
        }


    </script>
</body>

</html>

2 replies

ganigeorgiev Nov 6, 2023
Maintainer

Raw DB queries don't trigger the realtime events.
They are triggered only when the onModel* hooks are fired, eg. when the related $app.dao().saveRecord() or $app.dao().deleteRecord() method is called.

In the onRealtimeDisconnectRequest hook try to replace your delete query with:

const record = $app.dao().findFirstRecordByData("active_mouse", "realtime_id", e.client.id());
$app.dao().deleteRecord(record);

Answer selected by kidino

kidino Nov 6, 2023
Author

Thanks. It's working now.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Deleting a record from extend with JavaScript does not trigger frontend realtime event #3695

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Deleting a record from extend with JavaScript does not trigger frontend realtime event #3695

kidino Nov 6, 2023

Replies: 2 comments · 2 replies

ganigeorgiev Nov 6, 2023 Maintainer

kidino Nov 6, 2023 Author

ganigeorgiev Nov 6, 2023 Maintainer

kidino Nov 6, 2023 Author

kidino
Nov 6, 2023

Replies: 2 comments 2 replies

ganigeorgiev
Nov 6, 2023
Maintainer

kidino
Nov 6, 2023
Author

ganigeorgiev Nov 6, 2023
Maintainer

kidino Nov 6, 2023
Author