Protocol

User information

In the index.php javascript, the user object is randomly generated by @fzaninotto/faker. This is emulating a random user from your database.

{
  "username": "Mabelle Zboncak",
  "id": "6902f0cb44ab8e48195d585dad60ec0f"
}

This object is communicated over the network to the WebSocket server. That being said, lets talk a litle bit more about the loop of the protocol.

Before receiving any information from the WebSocket server we need to register the user with the User Registration call. After the user is registered to the WebSocket server you can start sending User list requests on an interval (WebSocket.js does this every 2000 milliseconds). With the User list response object, you can update the UI.

PACKAGE == JSON PAYLOAD

User Registration

The registration package is necessary without registering your user you won't receive any channel updates even if requested.

Request

In this example we register user Mabelle Zboncak with a unique id of 6902f0cb44ab8e48195d585dad60ec0f. This unique id is just a fake id like a database record id.

{
  "user": {
    "username": "Mabelle Zboncak",
    "id": "6902f0cb44ab8e48195d585dad60ec0f"
  },
  "type": "registration"
}

Response

None

User list

Request

{
  "user": {
    "username": "Mabelle Zboncak",
    "id": "6902f0cb44ab8e48195d585dad60ec0f"
  },
  "type": "userlist"
}

Response

This response object is sent back to the user requesting the userlist.

{
  "users": {
    "82": {
      "username": "Mabelle Zboncak",
      "id": "6902f0cb44ab8e48195d585dad60ec0f"
    }
  },
  "type": "userlist"
}

Sending message

{
  "user": {
    "username": "Mabelle Zboncak",
    "id": "6902f0cb44ab8e48195d585dad60ec0f"
  },
  "message": "dd",
  "to_user": null,
  "type": "message"
}

Receiving message

{
  "user": {
    "username": "Mabelle Zboncak",
    "id": "6902f0cb44ab8e48195d585dad60ec0f"
  },
  "message": "aa",
  "to_user": null,
  "type": "message"
}

Sending Private message

This package will send a message from user Tavares Bergstrom V to the user Dr. Kailey Douglas.

{
  "user": {
    "username": "Tavares Bergstrom V",
    "id": "30fb2c45e59353e83dcdbc625cdb7a61"
  },
  "message": "abc",
  "to_user": {
    "id": "c756f90f3e832c6c92b45b4bfe11c847",
    "username": "Dr. Kailey Douglas"
  },
  "type": "message"
}

Receiving private message

Only the targeted user will receive this package. In the example below we are the targeted user Dr. Kailey Douglas and we receive an private message from Tavares Bergstrom V.

{
  "user": {
    "username": "Tavares Bergstrom V",
    "id": "30fb2c45e59353e83dcdbc625cdb7a61"
  },
  "message": "abc",
  "to_user": {
    "id": "c756f90f3e832c6c92b45b4bfe11c847",
    "username": "Dr. Kailey Douglas"
  },
  "type": "message"
}

Typing indicator

In the example chatroom, we update the UI by showing "User xx: is typing a message".

Sending

In the package, we are indicating that Tavares Bergstrom V is currently typing a message We are Tavares Bergstrom V

{
  "user": {
    "username": "Tavares Bergstrom V",
    "id": "30fb2c45e59353e83dcdbc625cdb7a61"
  },
  "type": "typing",
  "value": true
}

Receiving

{
  "user": {
    "username": "Tavares Bergstrom V",
    "id": "30fb2c45e59353e83dcdbc625cdb7a61"
  },
  "type": "typing",
  "value": true
}