Not able to connect socket.

[santhoshkumarguna]

i have configured frappe provider for my react application and then my frappe server is running on separate url.
now i am getting cors error.

below error got from my network.

This is my source code.

Kindly help me to solve this issue.

[nikkothari22]

Hi @santhoshkumarguna - in your site_config.json allow requests from the frontend URL for CORS. I think the key would be "allow_cors". You would need to mention both URLs in site_config

https://stackoverflow.com/questions/64229353/frappe-framework-erpnext-how-to-enable-cors-on-localhost

[santhoshkumarguna]

Hi @nikkothari22 in my react application the web socket url being like this
https://chat-test.fr8.in/socket.io/?EIO=4&transport=polling&t=OmKCtiI

when i see the chat on separate site web socket url being like this
wss://draven.fr8.in/socket.io/?EIO=4&transport=websocket&sid=SXUvTL-yMs9cHnxGAdTL

I put that you provided code still i getting cors error.

In frappe socket configuration code blocks like this

[nikkothari22]

Hey @santhoshkumarguna

Did you add the URL to your allow CORS list in your site_config.json? Can you share that?

This error is not related to the SDK or the frontend. It's the server that's not accepting the request because it's cross origin.

[santhoshkumarguna]

This is my site_config.json file

{
"db_name": "_d1202f0547830600",
"db_password": "Wr0BQWKvbpg0kQj9",
"db_type": "mariadb",
"encryption_key": "maZ4BxtH0RIbOzekEVZ0PG49B5x-l1PeFQzPnJkFwww=",
"maintenance_mode": 0,
"throttle_user_limit": 500,
"allow_cors": "https://dgrow.fr8.in"
}

I allowed my origin. now cors error has gone but my websocket is not subscribing. not able to listen realtime updates.

[nikkothari22]

Unrelated to this but you should have two URL's in your allow_cors - one is your frontend the other is your main frappe server.

This seems like a CORS issue for socket.io in Frappe, rather than an issue with Frappe React SDK. You would have to debug if you can connect to socket directly from a separate origin (without the SDK) - I think that won't work, maybe because Frappe does not check for the allow CORS flag for Socket. (Similarly, API Key secret auth does not work with Socket on Frappe).

If you're not able to connect using Socket to Frappe from a different origin, then the issue is with the framework and not the SDK.

[abhishek0010]

I am currently developing a custom frappe app using react and frapp-react-sdk

There are hooks namely: useFrappeEventListener which catches named events when frappe emit that, useFrappeDoctypeEventListener which subscribes to a doctype and emits all the events, etc.
I think the event is is emitted using frappe.publish_realtime function within any doctype controller file. But this is not working for some reason.

I can inspect my custom app from the browser that the sockets are connected in port 9000. and there is some back and forth between them. But my events are not catched there.

My items.py hook call is as follows:

def after_insert(doc, method):
    """
    Create an event after item create
    """
    print("HELLO FROM AFTER CREATE")
    event = frappe.publish_realtime("items:created", {'message': 'item'+doc.name+'created'}, user=frappe.session.user)
    print(event)

My code for collecting this event within a react component is as follows:

export default function Items() {
...
   useFrappeEventListener("items:created", (event) => {
        console.log("ITEMS ADDED REALTIME EVENT")
    })

My setup is docker based which follows frappe_docker repository, in which every service required by frappe is within the docker compose file. My database is postgres:14.11.

Any help/instruction would be heartfelt appreciated.