# ServiceCenters / Appointments ActionCable HowTo [TOC] ## subscribing should probably look like this: ```jsx= useEffect(() => { socket = consumer.subscriptions.create( { channel: 'ServiceCentersChannel', service_center_id: serviceCenterId, }, { connected() { console.info('[List-Socket] Connected') setIsConnecting(false) }, disconnected: notifyDisconnect, received: handleMessageFromCable, }, ) ``` ## sending action triggers to ActionCable from React in AppointmentsList component (or whatever the name is) we'd have to have methods such as these: ```jsx= const updateAppointmentPatient = (id, attrs) => { socket.perform('update_appointment_patient_record', { appointment_patient_id: 345, payload: { //attrs go here, e.g ready_at: (new Date().toISOString()), }) } const persistEditedBy = (id, action) => { socket.perform('update_appointments_patient_viewed_by', { appointment_patient_id: id, popup_action: action, // 'open' or 'close' }) } ``` ## Postman testing You CAN test ActionCable with our postman account (note that it is postman's experimental feature though) ![](https://i.imgur.com/volmKlo.png) https://hltechteam.postman.co/workspace/Hjemmelegene~d170d95a-3277-4b1c-8d9b-04f59b33e269/websocket-request/61f45fdcb04426784bc079b7 note that cable to work needs our session cookie authorized as ServiceProvider so you need to set headers in Postman to sth like: ``` Cookie: _session_id=JNyWbpPGn%2BSOrJQf5h4XfqHe9NlnmTpcI8rulkqitkj%2BdRPFu%2BJm0OEATdbpApsdlN%2FWWXY9Nmp4V1z9ePrlHgll%2FrdiySJaiz%2B2wnk9QQt7zLiJntbV%2BaKxLLa45pxxqxmvUN%2F5YDJUy8XtHJlbgUAQioZglFIRnD%2BEpinftqCtzgoWkFewjg7kIK9lXqzAwtiAd%2Ff25OG8kvOwxoP2UEUQRt0tvQNKYTg1DYJy01D%2BuMToIW4AmvdGLCzIPh8XHdV10aUwj%2Bd2pJgUd4%2FaD6Su8cBvp1P78Y62qwRxRC%2BSHgun2DugouvG9J0bc7oACIQb8SD%2Bre4q--N1wA6xdPa28VplY2--9EZozRIJ1YXrVYbTEoeyJA%3D%3D; path=/; expires=Sat, 29 Jan 2022 21:55:55 GMT; HttpOnly ``` ## What info can you expect from websockets popping to the React ### Whenever new appointment is created: ### Websocket says: ```json= { "identifier": "{\"channel\":\"ServiceCentersChannel\",\"service_center_id\":1}", "message": { "event": "appointment_created", "appointment": { "id": 3, "service_center_id": 1, "product_id": 1, "user_id": 1, "date": "2022-01-31", "timeslot": 940, "duration": 10, "appeared_at": null, "ready_at": null, "deleted_at": null, "created_at": "2022-01-29T16:32:08.686+01:00", "updated_at": "2022-01-29T16:32:08.686+01:00", "currently_edited_by_id": null, "hour": "15:40", "patient_count": 1, "begins_at": "2022-01-31T15:40:00.000+00:00", "patients": [ { "id": 11, "name": "John Smith", "address": "Toftes Gate 48b", "address_directions": null, "zip": "0556", "city": "Oslo", "phone_number": "+4790000000", "email": "user0@example.com", "created_at": "2022-01-29T15:54:16.099+01:00", "updated_at": "2022-01-29T15:54:16.179+01:00", "avatar_url": null, "referral_id": null, "phone_number_old": null, "independent": null } ] } } } ``` ### Whenever new appointment is updated: #### Websocket says: ```json= { "identifier": "{\"channel\":\"ServiceCentersChannel\",\"service_center_id\":1}", "message": { "event": "appointment_updated", "appointment": { "id": 3, "service_center_id": 1, "product_id": 1, "user_id": 1, "date": "2022-01-31", "timeslot": 940, "duration": 10, "appeared_at": null, "ready_at": null, "deleted_at": null, "created_at": "2022-01-29T16:32:08.686+01:00", "updated_at": "2022-01-29T16:32:08.686+01:00", "currently_edited_by_id": null, "hour": "15:40", "patient_count": 1, "begins_at": "2022-01-31T15:40:00.000+00:00", "patients": [ { "id": 11, "name": "John Smith", "address": "Toftes Gate 48b", "address_directions": null, "zip": "0556", "city": "Oslo", "phone_number": "+4790000000", "email": "user0@example.com", "created_at": "2022-01-29T15:54:16.099+01:00", "updated_at": "2022-01-29T15:54:16.179+01:00", "avatar_url": null, "referral_id": null, "phone_number_old": null, "independent": null } ] } } } ``` ### Whenever appointment is cancelled: #### Websocket says: ```json= { "identifier": "{\"channel\":\"ServiceCentersChannel\",\"service_center_id\":1}", "message": { "event": "appointment_cancelled", "appointment_id": 3 } } ```