Skip to main content
Mobile apps integrate with VIZOCHOK via the WebSocket API directly. The JS SDK widget is designed for web browsers; mobile platforms should build their own chat UI on top of the WebSocket protocol.

​
What You Need to Build

To integrate VIZOCHOK into a mobile app, you need to implement:

WebSocket Client

Connect to wss://api.vizochok.com/api/v1/ws/chat, handle authentication, send/receive JSON messages, manage reconnection.

Chat UI

Text input, message bubbles, streaming text display (token-by-token), typing indicators.

Product Cards

Render product_cards messages as native product list with images, prices, quantity steppers, and “Add” buttons.

Cart Sync

Listen for cart_changed events and update your app’s cart state. Send action messages when user interacts with product cards.

​
WebSocket Message Types to Handle

Your mobile client needs to handle these server messages:
Message TypePurposeUI Action
auth_okAuthentication confirmedEnable chat input
conversation_startedNew conversation createdSave conversation_id
session_restoredReconnected to existing sessionRestore cart state
text_deltaStreaming text chunkAppend to current message bubble
text_endText block completeStop streaming indicator
statusProgress update (e.g. “Searching…”)Show status indicator
product_cardsProduct resultsRender native product list
quick_repliesSuggestion buttonsShow tappable option pills
cart_changedCart was modifiedUpdate cart badge/state
ingredient_checklistRecipe ingredientsRender checkable list
errorError occurredShow error message
response_completeReady for next messageEnable input
And send these client messages:
Message TypeWhen
authFirst message after connection
messageUser sends text
actionUser taps product card, quick reply, or checklist submit
pingEvery 30 seconds (keepalive)
pongIn response to server ping
For full field specifications, see WebSocket Protocol.

​
Platform-Specific Considerations

​
React Native

  • Use a WebSocket library (built-in WebSocket API or react-native-websocket)
  • Handle AppState changes: disconnect on background, reconnect on foreground
  • Store conversation_id in AsyncStorage for session persistence
  • Use FlatList for message rendering with streaming text support

​
Flutter

  • Use web_socket_channel package for WebSocket connection
  • Listen to AppLifecycleState for background/foreground transitions
  • Store conversation_id in shared_preferences
  • Use StreamBuilder to render incoming messages reactively

​
Native iOS / Android

  • iOS: URLSessionWebSocketTask (iOS 13+) or Starscream
  • Android: OkHttp WebSocket or Java-WebSocket
  • Both: handle network reachability changes, reconnect with exponential backoff

​
Connection Lifecycle for Mobile

1

App opens chat screen

Connect to WebSocket, send auth message with API key and user ID.
2

User sends a message

Send message with text and conversation_id. Show streaming response as text_delta messages arrive.
3

User interacts with products

When user taps “Add” on a product card, send action message with sku and quantity. Listen for cart_changed to confirm.
4

App goes to background

Close WebSocket connection gracefully. Save conversation_id.
5

App returns to foreground

Reconnect to WebSocket, send auth with saved conversation_id. Server sends session_restored with cart state.

​
Reconnection Strategy

Implement exponential backoff with jitter, matching the web SDK behavior:
ParameterValue
Initial delay1,000 ms
Max delay10,000 ms
Formulamin(1000 * 2^attempt, 10000)
Jitter+/- 25%
Max attempts30
Do not reconnect on auth errors (close codes 4001, 4002, 4003, 4004).

​
Code Examples

For working Python and Node.js WebSocket connection examples, see WebSocket Direct Integration. The same protocol applies to mobile clients in any language.