---
# System prepended metadata

title: ServiceCenters / Appointments ActionCable HowTo

---

# 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    
    }
}
```
