System Designer

System Designer

  • Languages iconSvenska
    • English
    • Ελληνικά
    • Português (Brasil)
    • 繁體中文
    • Help Translate
  • SUPPORT
  • GITHUB

›Tutorials

Introduction

  • What is System Designer?
  • What is Design First?
  • Quick Start
  • Quick Start in videos

Guides

  • Installation
  • Create a System
  • Create a Schema
  • Edit a model
  • Create a Behavior
  • Create a Type
  • Create a Component
  • Run your System
  • Export a System
  • Import a System
  • Generate a diagram
  • Sync your systems with GitHub
  • Design a remote client system
  • Design a remote server system
  • Hantera tillägg
  • Extend System Designer
  • Shortcuts

Tutorials

  • List of Examples
  • Bundle your CSS
  • Bundle your JavaScript
  • Bundle your HTML
  • Test a server-side application
  • Create a NPM module
  • Create a website
  • Lyssna efter en modellhändelse
  • Listen to a data store event
  • Send messages
  • Send messages to other systems
  • Create an extension
  • Generate a model from a JSON file
  • Create a Graph system

Articles

  • Articles about the project

About

  • Who is behind System Designer?
  • Privacy Policy
  • License
Translate

Send messages to other systems

In this tutorial we will show how to send messages from one system to another system with channels.

At runtime a channel component is defined to send / receive messages between systems

Define your messages

After creating your system:

  • click on the import button on the left toolbar,
  • en dialogruta visas,
  • click on from the library radio button,
  • select Send messages through a channel from the proposed systems,
  • click on the Compose button,

Image Alt

This system has now been composed in your system.

  • on Schemas tab, click on _Channel schema (on the right panel under Schemas),
  • click on _Channel schema to edit it,
  • add somethingHappened event:
{
  "_id": "104ad1f48518376",
  "_name": "_Channel",
  "_inherit": [
    "_Component"
  ],
  "send": "event",
  "somethingHappened": "event"
}
  • on Models tab, click on _Channel model (on the right panel under Models),
  • click on _Channel model to edit it
{
  "_id": "135c71078810af2",
  "_name": "_Channel",
  "send": {
    "params": [
      {
        "name": "message",
        "type": "message"
      }
  ]
  },
  "somethingHappened": {
    "params": [
      {
        "name": "param",
        "type": "any",
        "mandatory": false,
        "default": ""
      }
    ]
  }
}

We let the default values.

Define how to send the message

  • on Behaviors tab, click on _Channel model (on the right panel under Models),
  • click on the send behavior to edit it,
function send(message) { 
  // define here how to send the message to another channel (webRTC, XHR, ...)
  // example
  fetch('url_to_a_server', {
    method: 'POST',
    headers: new Headers({
      'Content-Type': 'application/json',
      'X-System-Id': message.from, // current system id (string value)
      'X-System-Event': message.event // event name (string value)
    }),
    body: message.data // arguments send to the event (array value)
  });
}

Define in this behavior how to send the message to another channel (webRTC, XHR, ...).

Send a message

  • edit the behavior in which you want to send a message to another channel,
  • require the channel component,
  • call the event you have defined, somethingHappened and
  • pass as parameter a string (as defined in the model).
this.require('channel').somethingHappened('my message');

Listen to a message

  • create another system,
  • do all the steps of part Define your messages,
  • edit the behavior in which you want to listen to a message send from another channel (send via webRTC, XHR, ...),
  • require runtime component,
  • call the message method and
  • pass an object that contains the information send by the other system:
// we suppose that this system runs on a server and
// get the header and body of the request send by the other system

this.require('runtime').message({
  'event': headers['x-system-event'], // 'somethingHappened' (string value)
  'from': headers['x-system-id'], // system id of the system that send the message (string value)
  'data': body // the arguments send by event (array value)
);
  • then click on channel component (on the right panel under Components),
  • click on the '+' button on the left toolbar to add a behavior,
  • select somethingHappened from the list,
  • click on the Create button,
  • click on the somethingHappened behavior to edit it,
  • lägg till denna kod:
function somethingHappened(param) { 
  // get logger component
  let logger = this.require('logger');

  logger.info('the message ' + param + ' has been send to this system');
}

Now your system is able to listen to an event send by the other system.

← Send messagesCreate an extension →
  • Define your messages
  • Define how to send the message
  • Send a message
  • Listen to a message
System Designer is distributed under Apache License 2.0 - Copyright © 2024 Erwan Carriou