check frontend version on connect

reflex/.templates/web/utils/state.js

@@ -407,6 +407,7 @@ export const connect = async (
   socket.current = io(endpoint.href, {
     path: endpoint["pathname"],
     transports: transports,
+    protocols: [env.REFLEX_VERSION],
     autoUnref: false,
   });
   // Ensure undefined fields in events are sent as null instead of removed

reflex/app.py

@@ -1535,7 +1535,11 @@ class EventNamespace(AsyncNamespace):
             sid: The Socket.IO session id.
             environ: The request information, including HTTP headers.
         """
-        pass
+        subprotocol = environ.get("HTTP_SEC_WEBSOCKET_PROTOCOL", None)
+        if subprotocol and subprotocol != constants.Reflex.VERSION:
+            console.warn(
+                f"Frontend version {subprotocol} for session {sid} does not match the backend version {constants.Reflex.VERSION}."
+            )
 
     def on_disconnect(self, sid):
         """Event for when the websocket disconnects.

reflex/utils/build.py

@@ -19,7 +19,10 @@ def set_env_json():
     """Write the upload url to a REFLEX_JSON."""
     path_ops.update_json_file(
         str(prerequisites.get_web_dir() / constants.Dirs.ENV_JSON),
-        {endpoint.name: endpoint.get_url() for endpoint in constants.Endpoint},
+        {
+            **{endpoint.name: endpoint.get_url() for endpoint in constants.Endpoint},
+            "REFLEX_VERSION": constants.Reflex.VERSION,
+        },
     )