Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>It sounds like you're looking for a <a href="https://en.wikipedia.org/wiki/Finite-state_machine" rel="nofollow">state machine</a>. There's a lot of reading you can do on state machines, but basically they represent a thing that can be in one of any number of <em>states</em>; the state of the machine can be changed by triggering appropriate <em>events</em> on the machine.</p> <p>In your case, <code>calling</code> and <code>onUserCalling</code> are the <em>states</em>, and <code>call</code>, <code>answer</code>, <code>reject</code>, etc. are the <em>events</em>. By representing this as a state machine, you can keep track of which state a user is in and what states they can transition to based on the events.</p> <p>As an example, <a href="http://plunker.co/edit/sUJNGo32XhOzrhPXqNDp?p=preview" rel="nofollow">here is some code on Plunker that demonstrates such a state machine</a>. (Ignore the fact that the user interface interaction was built with AngularJS.) The state machine is defined via a library called <a href="https://github.com/jakesgordon/javascript-state-machine" rel="nofollow">JavaScript State Machine</a> and is defined as such:</p> <pre class="lang-javascript prettyprint-override"><code>StateMachine.create({ initial: 'ready', events: [ { name: 'placeCall', from: 'ready', to: 'calling' }, { name: 'receiveCall', from: 'ready', to: 'callWaiting' }, { name: 'callAnswered', from: 'calling', to: 'inCall' }, { name: 'callRejected', from: 'calling', to: 'ready' }, { name: 'answerCall', from: 'callWaiting', to: 'inCall' }, { name: 'rejectCall', from: 'callWaiting', to: 'ready' }, { name: 'hangUp', from: ['calling', 'inCall'], to: 'ready' } ] }); </code></pre> <p>This says that when the machine is in the <code>ready</code> state, we can trigger the <code>placeCall</code> event to change the state <code>calling</code>, or we can trigger the <code>receiveCall</code> event to change the state to <code>callWaiting</code>. Once the state has been changed to <code>calling</code>, we can move to either the <code>inCall</code> state or back to <code>ready</code> by triggering the <code>callAnswered</code> or <code>callRejected</code> events, respectively.</p> <p>The state machine library can look into the events definition and tell you which events are allowed to be fired based on the current state of the machine. In the example, I've used this to only enable the buttons that will fire allowed events.</p> <p>Most state machine libraries, including the JavaScript one I've used here, allow you to supply callbacks when you enter or leave certain events; this particular library also allows asynchronous event transitions, which may help when using the library with async Node.js code. You can find more information <a href="https://github.com/jakesgordon/javascript-state-machine#callbacks" rel="nofollow">in the readme</a>.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload