Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
This example will quickly connect your phoenix socket, and show the simple basic socket events.
After installation and the setting up of the middleware, you can simply copy this code for your root Saga.
Should the socket attempt to open, the following redux event is dispatched
Parameter | Description |
---|---|
type
SOCKET_OPEN
socket
phoenix socket
domainKey
endpoint url without socket details or protocol
params
socket connection params
This method will subscribe phoenix channel for the given channelTopic and given events
Recommended that you already have made a socket connection by using connectPhoenix method before using this method.
Parameter | Description | Type | Required |
---|---|---|---|
channelTopic
Name of channel/Topic
string
logPresence
Determines if presence should be tracked for the channel
boolean
token
private token for channel
string
additionalData
This data will be available for you as additionalData on the response
object
events
Array of event names to subscribe to and will dispatch response to eventActionType
{
eventName:string; eventActionType:string
} []
domainUrl
socket endpoint to connect to
string
All the events associated with the socket channels
Should an error occur from the phoenix socket channel, the following redux event is dispatched. Invoked if the socket connection drops, or the channel crashes on the server.
Parameter | Description |
---|---|
type
CHANNEL_ERROR
channelTopic
Name of channel/Topic
channel
Phoenix channel
After phoenix channel is left. The following redux event is dispatched
Should an error occur from the phoenix socket channel, the following redux event is dispatched. Error response after joining the phoenix channel.
Parameter | Description |
---|---|
Parameter | Description |
---|
type
CHANNEL_LEAVE
channel
Phoenix channel
type | CHANNEL_JOIN_ERROR |
channelTopic | Name of channel/Topic |
channel | Phoenix channel |
additionalData |
error | Phoenix channel error |
additionalData passed when using
Should an error occur from the phoenix socket channel, the following redux event is dispatched. Timeout error response after joining the phoenix channel.
Should an error occur from the phoenix socket channel, the following redux event is dispatched. Error response after pushing data to phoenix channel.
Parameter | Description |
---|---|
Parameter | Description |
---|
type
CHANNEL_TIMEOUT
channelTopic
Name of channel/Topic
channel
Phoenix channel
additionalData
additionalData passed when using getPhoenixChannel
error
Phoenix channel error
type | CHANNEL_PUSH_ERROR |
channelTopic | Name of channel/Topic |
channel | Phoenix channel |
error | Phoenix channel error |
After joining a phoenix channel, the following redux event is dispatched.
Should a phoenix channel be explicitly closed on the server or the channel was explicitly closed by calling channel.leave(). The following redux event is dispatched
All the methods and events associated with the socket
phoenix-to-redux is a redux-store middleware that integrates phoenix socket communication with the redux store using redux actions.
Include the phoenix reducer into your combined reducer
Please note the sagaMiddleware used below is not required, this is just what is being use in the example below to intercept all redux actions.
Below is just quick simple React App example
Parameter | Description |
---|---|
Parameter | Description |
---|
You can install phoenix-to-redux with or
Using is recommended over npm.
Example below for including the phoenix-to-redux middleware into your application. see , for more info on setting up your store.
type
CHANNEL_JOIN
channel
Phoenix channel
additionalData
additionalData passed when using getPhoenixChannel
response
Phoenix channel response
type | CHANNEL_CLOSE |
channel | Phoenix channel |
All the events associated with the socket
All the methods associated with the socket
Should an error occur from the phoenix socket, the following redux event is dispatched
Dive into the specifics of each API endpoint by checking out our complete documentation.
See phoenix docs for more detailed information.
Please note all methods need to be dispatched to the redux store either using the
useDispatch hook, the dispatch store function or the put effect in a Saga
All the methods and events associated with the socket
All the methods and events associated with the socket channels
Parameter | Description |
---|---|
Parameter | Description | Type | Required |
---|---|---|---|
type
SOCKET_ERROR
error
Error response from socket
domainKey
endpoint url without socket details or protocol
socketState
Connection state of socket
domainUrl
socket endpoint to connect to
string
params
optional parameters to pass when connecting to socket
any
options
optional configuration options
Parameter | Description | Type | Required |
---|---|---|---|
channelTopic
Name of channel/Topic
string
Should the socket attempt to close, the following redux event is dispatched
Parameter | Description |
---|---|
type
SOCKET_CLOSE
socket
phoenix socket
domainKey
endpoint url without socket details or protocol
params
socket connection params
All the methods associated with the socket channels
Should the socket attempt to disconnect, the following redux event is dispatched
Parameter | Description |
---|---|
type
SOCKET_DISCONNECT
socket
phoenix socket
domainKey
endpoint url without socket details or protocol
params
socket connection params
Should the socket attempt to connect, the following redux event is dispatched
Parameter | Description |
---|---|
type
SOCKET_CONNECT
socket
phoenix socket
domainKey
endpoint url without socket details or protocol
Parameter | Description | Type | Required |
---|---|---|---|
channelTopic
Name of channel/Topic
string
events
Array of event names to unsubscribe to
string []
Parameter | Description | Type | Required |
---|---|---|---|
channelTopic
Name of channel/Topic
string
event
Event name to unsubscribe to
string
All the methods and events associated with the socket channels
This method will attempt to find the subscribed phoenix channel for the given channelTopic and push data to the channel for the eventName.
Recommended that you already have made a socket connection by using connectPhoenix method before using this method.
Parameter | Description | Type | Required |
---|---|---|---|
channelTopic
Name of channel/Topic
string
eventName
Name of the event on channel to push to
string
requestData
Payload data to push on the channel
any
additionalData
This data will be available for you as additionalData on the response
object
loadingStatusKey
A unique identifier you can use to separate progress status
string
endProgressDelay
timeout in milliseconds if you want to delay the endProgress of your loadingStatusKey
number
channelResponseEvent
name of redux event to dispatch to reducer on response from pushing to channel
string
channelErrorResponseEvent
name of redux event to dispatch to reducer on error from pushing to channel
string
channelTimeOutEvent
name of redux event to dispatch to reducer on timeout from pushing to channel
string
dispatchChannelError
false by default, determines if should an on channel error occur dispatch PHOENIX_CHANNEL_ERROR to the reducer
boolean
channelPushTimeOut
timeout in milliseconds for pushing to the channel, default is 1500
number