e6data

Unity Realtime Multiplayer, Part 2: TCP, UDP, WebSocket Protocols

ইউনিটি রিয়েলটাইম মাল্টিপ্লেয়ার, পার্ট 2: টিসিপি, ইউডিপি, ওয়েবসকেট প্রোটোকল

Unity Realtime Multiplayer, Teil 2: TCP-, UDP- und WebSocket-Protokolle

Multijugador en tiempo real de Unity, Parte 2: Protocolos TCP, UDP y WebSocket

Unity Realtime Multiplayer, partie 2 : TCP, UDP, protocoles WebSocket

यूनिटी रीयलटाइम मल्टीप्लेयर, भाग 2: टीसीपी, यूडीपी, वेबसॉकेट प्रोटोकॉल

Unity リアルタイム マルチプレイヤー、パート 2: TCP、UDP、WebSocket プロトコル

Unity 실시간 멀티플레이어, 2부: TCP, UDP, WebSocket 프로토콜

Unity Realtime Multiplayer, Parte 2: Protocolos TCP, UDP, WebSocket

Unity Gerçek Zamanlı Çok Oyunculu, Bölüm 2: TCP, UDP, WebSocket Protokolleri

Unity Realtime Multiplayer, Phần 2: Giao thức TCP, UDP, WebSocket

Unity 实时多人游戏，第 2 部分：TCP、UDP、WebSocket 协议

In my last few posts, we've been taking an extended look at moderating Amazon Interactive Video Service (Amazon IVS) chat rooms. Two weeks ago, we learned how to perform , and last week we saw how to . In this post, I'd like to switch gears and talk about an interesting use case for Amazon IVS chat rooms - live, interactive whiteboards. automated chat moderation with AWS Lambda functions manually moderate chat rooms Live streaming is mostly known for entertainment-related streams like gaming or sports, but it is a perfect tool for delivering educational content too. I've blogged before about on a stream, but whiteboarding is a unique way to provide a broadcaster and the viewers with a live, interactive way to visualize and even collaborate on a given topic. The demo in this post is very basic - just a "pen" tool for freehand drawing - but it has the potential to be expanded for shapes and images, making it the perfect starting point for creating your own whiteboard experience to enhance your Amazon IVS live streams. screen sharing and overlaying canvas elements Try it Out! Before we get into how to build the whiteboard, check out how it works below. You'll need to generate a chat token for an existing Amazon IVS chat room for two unique users and enter the tokens and respective values in the two CodePen embeds. In production, you'd use one of the AWS SDKs to generate your tokens, but for this demo, you can generate them with the AWS CLI to see how it works (see for more information). user-id this post $ aws ivschat create-chat-token \
  —room-identifier [CHAT ARN] \
  —user-id "1" \
  —capabilities "SEND_MESSAGE" \
  —query "token" \
  —output text Using the CLI command above, generate and enter the token for user "1" and enter that in the first CodePen. Then, repeat the process for user "2" in the second CodePen below. If your chat room was not created in , update the value to match your chat room's region. Once both users are connected, you can draw on one canvas and observe the drawing on the other canvas. user-id us-east-1 Endpoint If you don't have any Amazon IVS chat rooms to test things out with - WHY NOT?? Just kidding, of course. Here's a gif showing it in action where you can see my amazing art skills on display: Setting Things Up For this demo, I'm collecting the user id, pen color, chat token, and chat endpoint via a . In production, you'll have a dedicated user id, and your chat token and endpoint will come from a call to a server (or serverless function). It's important to track the user id to prevent the drawing from being replicated on the of the user who is currently drawing. Here is the HTML markup for the collection form and the drawing canvas. I've removed the Bootstrap classes used in the CodePen to make the code easier to read here. <form> <canvas> <div id="settings">
  <div>Settings</div>
  <div>
    <div>
      <label for="chat-userid">Chat UserId</label>
      <div>
        <input type="text" id="chat-userid" required />
      </div>
    </div>
    <div>
      <label for="pen-color">Pen Color</label>
      <div>
        <input type="color" id="pen-color" required />
      </div>
    </div>
    <div>
      <label for="chat-token">Chat Token</label>
      <div>
        <input type="text" id="chat-token" required />
      </div>
    </div>
    <div>
      <label for="chat-endpoint">Endpoint</label>
      <div>
        <input type="text" id="chat-endpoint" required />
      </div>
    </div>
    <div>
      <div>
        <button type="button" id="submit-settings">Submit</button>
      </div>
    </div>
  </div>
</div>
<div id="whiteboard-container">
  <canvas id="whiteboard">
    Sorry, your browser does not support HTML5 canvas technology.
  </canvas>
</div> Next, I've added a listener to set a random pen color and listen for the button click. DOMContentLoaded Submit document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('pen-color').value = `#${Math.floor(Math.random()*16777215).toString(16)}`;
  document.getElementById('submit-settings').addEventListener('click', () => {
    init();
  })
}); In the function, I set some global values for the information that we'll need later on to initialize the chat connection. In your application, you'll most likely be working with a modern JS framework and, therefore would avoid using global variables like this. init() const init = () => {
  window.chatEndpoint = document.getElementById('chat-endpoint').value;
  window.userId = document.getElementById('chat-userid').value;
  window.chatToken = document.getElementById('chat-token').value;
  window.penColor = document.getElementById('pen-color').value;
  if (!window.chatEndpoint || !window.chatToken || !window.userId) {
    alert('Chat Endpoint, Token and UserId are required!');
    return;
  }
  document.getElementById('settings').classList.add('d-none');

  // init chat connection
} Initializing a Chat Connection Now that we have the , , and , we can initialize our WebSocket connection to the Amazon IVS chat room by adding it to the function: userId chatToken chatEndpoint init() window.connection = new WebSocket(window.chatEndpoint, window.chatToken);
window.connection.addEventListener('message', (e) => {
  // todo: handle message
}); We'll populate the message handler in just a bit. For now, let's look at how to draw on the canvas. Drawing on the Canvas Before we can draw on the canvas, we'll add a bit of configuration to the canvas element to the function. init() const whiteboardContainer = document.getElementById('whiteboard-container');
const canvasEl = document.getElementById('whiteboard');
canvasEl.width = whiteboardContainer.offsetWidth;
canvasEl.height = whiteboardContainer.offsetHeight;
const ctx = canvasEl.getContext('2d');
ctx.lineWidth = 5;
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvasEl.width, canvasEl.height); The snippet above sets the width and height of the and sets the default background color. <canvas> Handling Mouse Events We'll add three listeners to our element: , , and . The handlers for these events will need to do two things: handle drawing on the current user's canvas, and publish an event via the WebSocket connection to other users so that the drawing can be replicated on all connected clients. <canvas> mousedown mousemove mouseup Consider using pointer events instead of mouse events ( , , and ) to make your whiteboard respond to both touch and mouse events. pointerdown pointermove pointerup canvasEl.addEventListener('mousedown', (e) => {
  window.isDrawing = true;
  const evt = { x: e.offsetX, y: e.offsetY, type: 'mousedown' };
  onMouseDown(evt);
  // queue event for publishing
});
canvasEl.addEventListener('mousemove', (e) => {
  if (window.isDrawing) {
    const evt = { x: e.offsetX, y: e.offsetY, type: 'mousemove' };
    // queue event for publishing
    onMouseMove(evt);
  }
});
canvasEl.addEventListener('mouseup', (e) => {
  window.isDrawing = false;
  onMouseUp({});
  // queue event for publishing
}); Now let's look at each of the functions that perform the actual canvas drawing. First, which gets the context for the canvas, begins a path, and moves to the proper and coordinates. onMouseDown() 2d x y const onMouseDown = (e) => {
  const canvasEl = document.getElementById('whiteboard');
  const ctx = canvasEl.getContext('2d');
  ctx.beginPath();
  const x = e.x;
  const y = e.y;
  ctx.moveTo(x, y);
}; Next, , which draws a line to the current and . Because we set a global variable to before calling , this method will be called continuously until the event sets the flag back to false. This means that will draw a line until we release the mouse button. onMouseMove() x y isDrawing true onMouseDown() mouseup isDrawing onMouseMove() const onMouseMove = (e, color) => {
  const canvasEl = document.getElementById('whiteboard');
  const ctx = canvasEl.getContext('2d');
  const x = e.x;
  const y = e.y;
  ctx.lineTo(x, y);
  ctx.strokeStyle = color || window.penColor;
  ctx.stroke();
}; Finally, closes the path that we started in . onMouseUp() onMouseUp() const onMouseUp = (e) => {
  const canvasEl = document.getElementById('whiteboard');
  const ctx = canvasEl.getContext('2d');
  ctx.closePath();
} At this point, each connected user can draw on their local , but none of the other connected users will be able to see what they have drawn. For this, we need to publish the events via the WebSocket connection. <canvas> Publishing Drawing Events There is no guarantee for how often a mouse event will get fired, but most browsers will fire . If we look at the , we can see that we're limited to 10 transactions per second. It would be pretty easy to hit quota limits if we tried to publish every single event for all connected chat users. To workaround this, we can do do two things: send events in a batch, and only publish a sample of the events to other connected clients. mousemove quite often service quotas for Amazon IVS chat mousemove mousemove Queuing Mouse Events Let's start by looking at how we can batch the events. First, we'll set up a few global variables to manage a queue of events. window.queue = [];
window.maxQueueSize = 20; Next, we'll create a method to build up a batch of events. When the batch size is greater than our configured (or when a event is received), we'll send the current batch. handleQueue() window.maxQueueSize mouseup const handleQueue = (event) => {
  if (window.queue.length <= window.maxQueueSize) {
    window.queue.push(event);
  }
  if (window.queue.length === window.maxQueueSize || event.type == 'mouseup') {
    sendEvents();
  }
}; Publishing Mouse Events The method builds a payload containing a JSON serialized version of the event queue and sends it just like we would normally post a chat message to a chat room with . Notice the object contains a of which we can use to differentiate whiteboard messages from normal chat messages in the handler (we'll look at that handler below). sendEvents() SEND_MESSAGE Attribute type whiteboard message const sendEvents = () => {
  const payload = {
    'Action': 'SEND_MESSAGE',
    'Content': '[whiteboard event]',
    'Attributes': {
      'type': 'whiteboard',
      'color': window.penColor,
      'events': JSON.stringify(window.queue),
    }
  }
  try {
    window.connection.send(JSON.stringify(payload));
    window.queue = [];
  }
  catch (e) {
    console.error(e);
  }
} Now we can modify the event handlers to call . mouse handleQueue() canvasEl.addEventListener('mousedown', (e) => {
  window.isDrawing = true;
  const evt = { x: e.offsetX, y: e.offsetY, type: 'mousedown' };
  onMouseDown(evt);
  handleQueue(evt);
});
canvasEl.addEventListener('mousemove', (e) => {
  if (window.isDrawing) {
    const evt = { x: e.offsetX, y: e.offsetY, type: 'mousemove' };  
  handleQueue(evt);
  onMouseMove(evt);
  }
});
canvasEl.addEventListener('mouseup', (e) => {
  window.isDrawing = false;
  onMouseUp({});
  handleQueue(evt);
}); Sampling Mouse Move Events If we were to run this application at this point, we'd probably quickly hit our service quota even though we're sending the events in batches. As mentioned above, we can sample the event to prevent this. We'll add a method and limit our call to in the handler to being called every 50-100ms. In my tests, I found this to be an acceptable range that both prevents hitting the service quota and provides a reasonably good recreation of the event sequence on the other client's . mousemove throttle() handleQueue() mousemove <canvas> window.throttlePause;

const throttle = (callback, time) => {
  if (window.throttlePause) return;
  window.throttlePause = true;
  setTimeout(() => {
    callback();
    window.throttlePause = false;
  }, time);
}; The only thing left to do to implement this sampling is to modify the handler to only queue the event every 50ms. mousemove canvasEl.addEventListener('mousemove', (e) => {
  if (window.isDrawing) {
    const evt = { x: e.offsetX, y: e.offsetY, type: 'mousemove' };
    throttle(() => {
      handleQueue(evt);
    }, 50);
    onMouseMove(evt);
  }
}); Handling Incoming Mouse Events Now that we have implemented the local drawing, and the logic to queue and publish events, we just need to add our handler for the WebSocket connection to handle the published events and recreate the drawings from other connected clients. Back inside of our function, right after we create the connection, add the following: message init() WebSocket window.connection.addEventListener('message', (e) => {
  const data = JSON.parse(e.data);
  const msgType = data.Attributes.type;

  if(msgType == 'whiteboard') {
    const events = JSON.parse(data.Attributes.events);
    const color = data.Attributes.color;
    const eventUserId = data.Sender.UserId;
    events.forEach(e => {
      const type = e.type;
      if(eventUserId != window.userId) {
        switch(type){
          case 'mousedown':
            onMouseDown({x: e.x, y: e.y});
            break;
          case 'mousemove':
            onMouseMove({x: e.x, y: e.y}, color);
            break;
          case 'mouseup':
            onMouseUp({});
            break;
        };  
      }      
    });  
  }

  // otherwise, handle as an incoming chat...
}); In the handler above, we first check the object for the key that we used when publishing the messages to differentiate these events from "normal" chat messages. If that is , we parse the JSON string which contains an array of events and loop over the array. Within the loop, we check to make sure the - the person publishing the event - is not the current . If not, we recreate the drawing operation on the local by calling the appropriate function. Attributes type type whiteboard events eventUserId userId <canvas> Potential Improvements In a production application, a whiteboard might need additional features like shapes, images, and text. To add such features, your application can utilize the same architecture that we have seen in the demo above. Improving Performance Since this demo uses JSON to publish events, the payload that we are publishing is larger than it has to be. To improve on the number of events that could be published in a single message, your application can publish events in a delimited text format and use identifiers for the events. For example, instead of a JSON array like this that publishes a payload of 94 bytes: [
  {
    "x": 100,
    "y": 100,
    "type": "mousedown"
  },
  {
    "x": 100,
    "y": 100,
    "type": "mousemove"
  },
  {
    "type": "mouseup"
  }
] You could instead format the data like this: 0,100,100|1,100,100,#ff9911|2 Enter fullscreen mode Exit fullscreen mode Here we have delimited each event with a pipe ( ) and the data within each event by a comma. The first character of the event ( , , ) represents the event type ( for a , for , and for ). The second and third characters are the and positions respectively. The fourth character, only necessary for events, is the pen color. This format results in a payload of 31 bytes - a 67% decrease in size. | 0 1 2 0 mousedown 1 mousemove 2 mouseup x y mousemove You could then handle this new payload format with this: payload = '0,100,100|1,100,100,#ff9911|2';
events = payload.split('|');
events.forEach((e) => {
  let type = e[0];
  let x = e[1];
  let y = e[2];
  let color = e[3];
  switch(type){
    case 0:
      onMouseDown({x, y});
      break;
    case 1:
      onMouseMove({x,y}, color);
      break;
    case 2:
      onMouseUp({});
      break;
  }
}) Summary In this post, we created a basic proof of concept that uses Amazon IVS chat messages to give chat developers the ability to add whiteboarding to their interactive live-streaming applications. We also discussed some potential ways to improve the application in production. If you have any questions, leave a comment or reach out to me on . Twitter Also Published Here

Using Amazon IVS Chat to Create an Interactive Whiteboard

These past few months, I challenged myself to solve a problem that many software content creators encounter — wanting to create video tutorials without the hassle of video editing. I released and deployed the project you can find (try on the desktop for the best user experience). here Inspiration There are two things software engineers constantly do — learn new programming concepts and explain their code to other people. is a developer’s best friend due to its convenience — You can view code snippets and apply them to your work. However, more detail is required than a few lines of code when a question is rather complex or esoteric. Stack Overflow Video content sites like YouTube are a bit better — they provide more context and they’re engaging to watch. But it isn’t time-efficient for creators to make short content because it takes too long to edit videos. Therefore, they make longer videos about broader topics to reach wider audiences — a nightmare for more experienced developers. Lightbulb Moment The thought arose that there needs to be a tool that provides just the right amount of context to a concept, is as detailed as an article, as engaging as a video, but isn’t a huge time cost for the creator. Feeling energized, I tasked myself to build such a thing — a browser-based IDE where users simply code as they normally would in editors like and Atom. In the background, it tracks and stores every action a user performs — writing in files, running commands, and making notes. VSCode With the click of a button, the editor generates a playback of the user’s actions which they can share on the platform for others to view and interact with. Architecture The application is structured as two micro-services: the main application and a language compilation server. I went with the classic MERN ( , , , ) stack for the main application. A non-relational database like MongoDB was perfect since the type of data stored would vary significantly based on the layout of the IDE and the code being written by a user. React is my bread and butter, and I am a huge fan of components. MongoDB Express React Node Material UI’s The code editor uses for its rich syntax highlighting. It also features a notes section with multimedia support made with and a terminal UI made with . Codemirror Quill Xterm.js The language compilation server encompasses a container running a Node server that exposes a pseudo-terminal interface using . The server is provisioned with a environment that pre-installs the required packages to compile various languages and frameworks. The IDE currently supports 14 of the most popular programming languages. Docker Node-pty NixOS The two micro-services are deployed as individual nodes in an cluster and communicate via . AWS ECS WebSockets The Magic The application’s core functionality is the ability to monitor a user’s action and create a playback as an interactive video. This is accomplished using , , and . Redux setTimeout() MediaRecorder Redux allows me to persist application state while passing information between React elements. The main application consists of two : canvas and playback. reducers The canvas reducer is responsible for storing two sets of data. The first is the layout of the IDE called the . This is a 2D array of objects where each object can be a file editor, notepad, or terminal type. These objects are rendered in the by mapping over the and displaying the objects as corresponding React elements. windowGrid UI windowGrid // The layout of the windows in the IDE.
this.windowGrid = [
        [new FileWindow(), new NoteWindow()],
        [new TerminalWindow()],
];

const getWindow = (window) => {
        let component;
        switch (window.type) {
            case constants.NOTE:
                component = (
                    <NoteWindow
                        key={window.Id}
                        id={window.Id}
                        width={calculatedColumnWidthPX}
                    />
                );
                break;
            case constants.TERMINAL:
                component = (
                    <TerminalWindow
                        key={window.Id}
                        id={window.Id}
                        height={calculatedRowHeightPX}
                        width={calculatedColumnWidthPX}
                    />
                );
                break;
            case constants.FILE:
                component = (
                    <FileWindow
                        height={calculatedRowHeightPX}
                        key={window.Id}
                        id={window.Id}
                        width={calculatedColumnWidthPX}
                        fileTabWidth={fileTabWidth}
                    />
                );
                break;
            default:
                break;
        }

        return component;
}; The second set of data stored by the canvas reducer is user input. I register custom input event listeners to each of the objects in the such that an action is dispatched to update the redux store when a user interacts with the IDE. windowGrid const fileEditorChangeHandler = (newValue) => {
    props.fileEditorContentChanged({
      windowId: props.id,
      value: newValue,
    });
}; The playback reducer also keeps track of two sets of data. The first data set is stored in the speed and position of text as it is rendered during playback. Text is displayed sequentially as it was typed. This is accomplished by keeping a timestamped record of text input and updating the state of the React component inside a call. setTimeout() const startAnimation = () => {
  if (retrievedDiff) {
    ANIMATION_WINDOW_MAP[props.id] = setTimeout(
        () => displayCharacter(),
         constants.SPEED_SETTING[props.currentSpeed].File
    );
  }
}; The second set of information stored by the playback reducer is audio metadata. With the help of MediaRecorder, a user can overlay audio onto a post. Audio data is saved as chunks, stitched into a object, and converted into an audio element when the IDE component mounts. I use to store the audio files. Blob AWS S3 initRecorder = async () => {
        navigator.getUserMedia =
            navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia;

        if (navigator.mediaDevices) {
            const s = await navigator.mediaDevices.getUserMedia({
                audio: true,
            });
            this.mediaRecorder = new MediaRecorder(s);
            this.chunks = [];
            this.mediaRecorder.ondataavailable = (e) => {
                if (e.data && e.data.size > 0) {
                    this.chunks.push(e.data);
                }
            };
            this.stream = s;
            this.mediaRecorder.addEventListener("stop", () => {
                this.setStream(null);
            });
        }
};

export const uploadAudioToS3 = async (
    postId,
    userId,
    blob,
    redirect = false
) => {
    s3.upload(
        {
            Bucket: "test",
            Body: blob,
            Key: `${userId}/${postId}.mp3`,
            ContentType: "audio/mp3",
        },
        function (err, data) {
            if (err) {
                console.log(err);
            } else if (redirect) {
                // reload and redirect to explore page.
                window.location.href = "/explore";
            }
        }
    );
}; Final Remarks We’ve become accustomed to being told what a concept is and then expected to use that knowledge and apply it to our work. However, putting beginners in the perspective of an experienced programmer facilitates a bottom-up approach to teaching, where viewers learn how and why a concept works the way it does. Why exactly this approach has not been wholly adopted can most likely be attributed to both inertia and a lack of realization of potential. The “memorize and adapt” teaching style has been predominant for so long, mainly because of its logistical simplicity. And since it has been just functional enough to output some number of knowledgeable learners, there is not a significant market push to fundamentally change the status quo. However, in recent years, companies like and a growing level of research in the area have shown that a bottom-up approach to teaching is far more effective and reaps much greater long-term gains in education. Khan Academy Want to Connect? Join the discord community to provide feedback on the project and tag along the development process. here Also published here.

How to Auto-Generate Interactive Coding Videos for Software Developers

Fetch the Right Data With Next.js and  React SSR

A while ago I created where I covered useful HTML tags and their types. This week I decided to make a sequel, reviewing some of the HTML attributes you might want to use. an article All of the attributes are easy to set up and can help you to achieve common tasks, which you would otherwise get by using some complex external libraries. In this article, I will review each attribute and include the code snippets, so it is easier for you to understand the use cases and syntax of the attributes. 1. Accept Describes which input file types are allowed. <input type="file" accept=".jpg, .png"> Only used with type of the tag.  Takes in a comma-separated list of one or more file types. To allow all files of specific media type, use . file <input> accept="image/*" 2. Autofocus Indicates that the particular element should be focused on page load. <input type="text" autofocus> Only one element in the document or dialog may have the attribute. If applied to multiple elements the first one will receive focus. autofocus 3. Inputmode Hints at the type of data that might be entered by the user while editing the element or its contents. <input type="text" inputmode="url" />
<input type="text" inputmode="email" />
<input type="text" inputmode="numeric" /> This allows a browser to display an appropriate virtual keyboard. 4. Pattern Specifies a regular expression that the value is checked against on form submission. <input> <input name="username" id="username" pattern="[A-Za-z0-9]+"> 5. Required Ensures that the element must be filled out before submitting the form. <form action="/send_form.js">  
Username: <input type="text" name="username" required>  
<input type="submit">  
</form> 6. Autocomplete Specifies whether the browser has permission to provide assistance to fill out form fields like email, phone numbers, country, etc. <input name="credit-card-number" id="credit-card-number" autocomplete="off"> For the full list of available values, see . autocomplete MDN reference 7. Multiple This attribute allows the user to select multiple values. <input type="file" multiple> You can use it with and types of and the tag. file email <input> <select> 8. Download Specifies that the target will be downloaded when the user clicks on the hyperlink. <a href="document.pdf" download>Download PDF</a> 9. Contenteditable This attribute allows the user to edit the content of the element. <div contenteditable="true">
  This text can be edited by the user.
</div> 10. Readonly Specifies that an input field is read-only. <input type="text" id="sports" name="sports" value="golf" readonly> A user can still tab to it, highlight it, and copy the text from it. To forbid those actions, use the attribute, instead. disabled 11. Hidden Specifies whether or not the element is visible. <p hidden>This text is hidden</p> 12. Spellcheck Defines whether the element is checked for spelling errors. <p contenteditable="true" spellcheck="true">Myy spellinng is checkd</p> Typically, all the non-editable elements are not checked, even if the attribute is set to and the browser supports spellchecking. spellcheck true 13. Translate Specifies whether the element should be translated when the page is localized. <footer><p translate="no">Printing Works, Inc</p></footer> An example use case would be your company name, book titles, locations, etc. 14. Loading Specifies whether a browser should load an image immediately or to defer loading of off-screen images until, for example, the user scrolls near them. <img src="https://cdn.mysite.com/media/image.jpg" loading="lazy"> is the default behavior, is used to defer (aka lazy loading). eager lazy 15. Onerror Allows adding a fallback image if the original is not loaded. <img src="imageafound.png" onerror="this.onerror=null;this.src='imagenotfound.png';"/> The is used to prevent the loop if the fallback image itself is not available. this.onerror=null 16. Poster Allows adding an image to be shown while the video is downloading. <video 
src="https://cdn.mysite.com/media/video.mp4"
poster="image.png">
</video> If not specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame. 17. Controls Specifies whether or not the audio/video controls should be displayed on the player. <audio controls
<source src="track11.mp3"  type="audio/mpeg">
</audio> 18. Autoplay Ensures that the audio/video will automatically start playing as soon as it is loaded. <video autoplay
src="https://cdn.mysite.com/media/myvideo.mp4"
poster="image.png">
</video> 19. Loop Specifies that the audio/video will start over again, every time it is finished. <audio loop
<source src="track323.mp3"  type="audio/mpeg">
</audio> 20. Cite Points to where the content is taken from, or change or deletion is referred. <blockquote cite="https://mysite.com/original-source-url">
  <p>Some awesome quote</p>
</blockquote> 21. Datetime Specifies the date and time when the text was deleted/inserted. <p>
  My plans for 2021 include visiting Thailand,
  <del datetime="2021-01-01T18:21">creating 6 courses,</del> 
  <ins datetime="2021-02-02T14:07">writing 12 articles.</ins>
</p>
<p>I will evaluate the completion on <time datetime="2021-12-31"></time>.</p> When used with the element, it represents a date and/or time in the machine-readable format. <time> 22. Async Ensures the script is executed asynchronously with the rest of the page. <script src="script.js" async></script> The attribute only has an effect on external scripts ( attribute must be present). async src 23. Defer Ensures the script is executed when the page has finished parsing. <script src="script.js" defer></script> The attribute only has an effect on external scripts ( attribute must be present). defer src 24. Draggable Specifies whether an element is draggable or not. <script>
const allowDrop = (e) => e.preventDefault();
const drag = (e) => e.dataTransfer.setData("text", e.target.id);
const drop = (e) => {
  var data = e.dataTransfer.getData("text");
  e.target.appendChild(document.getElementById(data));
}
</script>
<div ondrop="drop(event)" ondragover="allowDrop(event)" style="width:150px; height:50px; padding: 10px; border:1px solid black"></div>
<p id="drag" draggable="true" ondragstart="drag(event)">Drag me into box</p> Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out! Connect me on , and ! Twitter LinkedIn GitHub Visit my for more articles like this. Blog Also Published Here

24 HTML Attributes You Want to Use ✨📚

In this tutorial, we are going to build a web application using and integrate it with to create a real-time dashboard based on streaming data using standard SQL. AdonisJS Materialize Materialize lets you define views you want to maintain on your data, just as you would with any SQL table, and then get the results in real-time, unlike traditional databases which frequently act as if they've never been asked that question before. Prerequisites You need to have the following things installed before getting started: Install Docker Install Docker Compose Install Node.js What is Materialize that takes data coming from sources like Kafka, PostgreSQL, S3 buckets, and more and allows you to effectively transform it in real-time using SQL. is a streaming database Materialize Unlike a traditional database, Materialize is able to incrementally maintain views on top of streaming data, providing fresh and correct results as new data arrives. This means that, instead of recomputing the view from scratch every time it needs to be updated, it only does work proportional to the changes in its inputs, so it is fast and efficient. In the context of web development, Materialize can be used as a backend to power real-time applications (as we'll see in this demo)! Running a Materialize Demo For the sake of this tutorial we are going to run the following Materialize Demo: Materialize - Log Parsing Demo The setup of the demo is the following: We would not get into too much details here, but if you have not gone through this demo before, make sure to read it! To run the demo, follow these steps: First things first, before you could run the demo, you need to clone the repository: Clone the repository: git clone https://github.com/bobbyiliev/mz-http-logs.git Once that is done, switch to the repository directory: cd mz-http-logs Then start all services: docker-compose up -d With that, you would have your Materialize instance up and running. Next we will prepare our AdonisJS installation and use AdonisJS to create our Materialize sources and views! What is AdonisJS? AdonisJS is a web framework for Node.js. It includes everything that you would need to create a fully functional web application or an API. AdonisJS has been inspired by Laravel and it has its own ORM, Auth support, and a CLI tool called Ace which is very similar to Artisan. At the end we would extend the Log parsing Materialize demo and have the following setup: Install AdonisJS Let's start by installing AdonisJS. To do so, you would need to run the following command: npm init adonis-ts-app@latest hello-materialize Once you run that, you will be asked to select a project structure. You will be able to choose between an API, Web App, and a minimal possible AdonisJS app: CUSTOMIZE PROJECT
❯ Select the project structure …  Press <ENTER> to select
  api   (Tailored for creating a REST API server)
❯ web   (Traditional web application with server-rendered templates)
  slim  (A smallest possible AdonisJS application) For this tutorial let's go with the app! Using your arrow keys select and hit enter. web web After that you will be asked to choose a name for the project, I will leave this as but feel free to choose a different name. hello-materialize I will then press enter and say yes to the rest of the settings: ❯ Enter the project name · hello-materialize
❯ Setup eslint? (y/N) · y
❯ Configure webpack encore for compiling frontend assets? (y/N) › y This will instantiate the project and might take up to a minute to complete: Once ready, you can into the new project directory: cd cd hello-materialize And then start the webserver: node ace serve --watch If you are coming from the Laravel world, this would be just like running . The CLI tool is just like and comes with a lot of the same functionalities. php artisan serve ace artisan To check all of the commands, you can run: . ace node ace Installing Lucid Lucid is the AdonisJS ORM. It is quite similar to Laravel Eloquent. Lucid comes with an Active Record ORM, Query Builder, Migrations, Seeds, and Factories. Let's go ahead and install it! To do so, just run the following command: npm i @adonisjs/lucid Once done, you would need to do a quick configuration. Configuring Lucid In order to configure Lucid, you need to run the following command: ace node ace configure @adonisjs/lucid You will be asked to select the database driver that you want to use. As Materialize is wire-compatible with PostgreSQL, you can connect to it using any driver; here, make sure to select PostgreSQL! pg ![AdonisJS lucid configuration](https://cdn.hackernoon.com/images/ckwysasxk-004-m-0-as-6-d-20-z-32-q-0.jpg) Next, you will be asked to select where you want to display the configuration instructions. I chose , which prints out the necessary environment variables that you have to add to your file. In the terminal .env Configure the Materialize env variables In order to let our AdonisJS application connect to Materialize, we need to change the details in the file. PG_* .env With your favorite text editor, open the file and update the environment variables to: .env PG_ DB_CONNECTION=pg
PG_HOST=localhost
PG_PORT=6875
PG_USER=materialize
PG_PASSWORD=
PG_DB_NAME=materialize This will allow AdonisJS to connect to Materialize just as it would when connecting to PostgreSQL. One thing to keep in mind is that Materialize doesn’t yet support the full system catalog of PostgreSQL (we're working on it!), which means that ORMs like Lucid, Prisma, Sequelize, or TypeORM might fail during some attempts to interact with Materialize. As we work to broaden coverage, the integration with these tools will gradually improve! pg_catalog Creating a Controller Let's create a controller where we will add the functionality that would allow us to connect to Materialize! As the Materialize demo is simulating an application log with a lot of visitors, let's call our AdonisJS controller : VisitorsController node ace make:controller VisitorsController This will create a controller file at: app/Controllers/Http/VisitorsController.ts Next, let's create the routes that we would need! Creating the AdonisJS routes Your routes file is stored at . In there we can specify our application URLs and map them to different controllers and methods! start/routes.ts We do not yet have the methods ready, but we know that we would need the following routes: : When visited, this route would create a Materialize /source source : When visited, this route would create a /view materialized view : This route would return an event stream with all of the latest changes to our materialized view /visitors : This will be the landing page where we will display the streaming data that we are getting from the endpoint and Materialize / /visitors Open your routes file at and update it so that it has the following content: start/routes.ts import Route from '@ioc:Adonis/Core/Route'

Route.get('/', 'VisitorsController.index')
Route.get('/visitors', 'VisitorsController.visitors')
Route.get('/source', 'VisitorsController.source')
Route.get('/view', 'VisitorsController.view') Next, let's add a method that would allow us to create a Materialize source as described in the ! Materialize Log Parsing Demo Creating a Materialize Source from logs If you were accessing Materialize directly via a SQL client (like ), in order to access data from a continuously produced log file, you would execute the following statement: psql CREATE SOURCE requests
FROM FILE '/log/requests' WITH (tail = true)
FORMAT REGEX '(?P<ip>\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}) - - \[(?P<ts>[^]]+)\] "(?P<path>(?:GET /search/\?kw=(?P<search_kw>[^ ]*) HTTP/\d\.\d)|(?:GET /detail/(?P<product_detail_id>[a-zA-Z0-9]+) HTTP/\d\.\d)|(?:[^"]+))" (?P<code>\d{3}) -'; Let's see how we could do that via AdonisJS! First, open the file with your favorite text editor. app/Controllers/Http/VisitorsController.ts The file would have the following content initially: // import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'

export default class VisitorsController {} There are a few things that we would want to do: Import Lucid: import Database from '@ioc:Adonis/Lucid/Database' Then inside the VisitorsController class, let's create a method called and source // import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
import Database from '@ioc:Adonis/Lucid/Database'

export default class VisitorsController {

    public async source({request, response}) {

        //Using Ludic to connect to Materialize, we are executing a CREATE SOURCE statement
        const res = await Database.rawQuery(
            `CREATE SOURCE requests
                FROM FILE '/log/requests' WITH (tail = true)
                FORMAT REGEX '(\\?P<ip>\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}) - - \[(\\?P<ts>[^]]+)\] "(\\?P<path>(\\?:GET /search/\\\?kw=(\\?P<search_kw>[^ ]*) HTTP/\d\.\d)|(\\?:GET /detail/(\\?P<product_detail_id>[a-zA-Z0-9]+) HTTP/\d\.\d)|(\\?:[^"]+))" (\\?P<code>\d{3}) -';`
            );
        return res;

    }

} Now, if you were to visit the URL via your browser ( ) it would create your Materialize source: /source http://127.0.0.1:3333/source Creating a Materialize View You may be familiar with materialized views from the world of traditional databases like PostgreSQL, which are essentially cached queries. The unique feature here is the materialized view we are about to create is automatically kept up-to-date. Let's do the same thing as before, but to create a materialized view based on our file source! To do that, let's create a method called with the following content: view Add this right after the end of the method source public async view({request, response}) {

        //Using Ludic to connect to Materialize, we are executing a CREATE VIEW statement
        const res = await Database.rawQuery(
            `CREATE OR REPLACE MATERIALIZED VIEW unique_visitors AS
             SELECT count(DISTINCT ip) FROM requests;`
            );
        return res;

    } Our materialized view would show the count of the unique visitors flowing through our demo application. To create the view, visit the URL via your browser (eg. ). /view http://127.0.0.1:3333/view With that, our view will be created and we can move on to the next step! Creating an event stream You can query the new materialized view, that we've just created, as usual with a standard statement: SELECT SELECT * FROM unique_visitors; However, in order to take full advantage of the incrementally updated materialized view right from our AdonisJS app, rather than querying Materialize with a standard to get the state of the view at a point in time, we will use a statement to request a stream of updates as the view changes. SELECT TAIL public async visitors({request, response}) {

        // First we set a header to identify that this would be an event stream
        response.response.setHeader('Content-Type',  'text/event-stream');

        // Then we declare a TAIL cursor
        await Database.rawQuery('BEGIN');
        await Database.rawQuery('DECLARE visitors_c CURSOR FOR TAIL unique_visitors');

        // Finally we use FETCH in a loop to retrieve each batch of results as soon as it is ready
        while (true) {
            const res = await Database.rawQuery('FETCH ALL visitors_c');
            response.response.write(`data: ${JSON.stringify(res.rows)}\n\n`)
        }
    } For more information about , make sure to check out the official documentation here: TAIL statement. Materialize TAIL If you were to now visit the URL via your browser, you would see the following output: /visitors Next, let's create a view where we would use the endpoint as an event source and continuously update our web page. /visitors Displaying the number of unique visitors on the frontend First, before we get started, make sure that you've executed the following command to configure Encore which is used to compile and serve the frontend assets for your AdonisJS app: node ace configure encore Then create a new file at: resources/views/visitors.edge And add the following content: <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize and AdonisJS</title>
  @entryPointStyles('app')
  @entryPointScripts('app')
</head>
<body>

  <main>
    <div>
      <h1 class="title"> Hi there! </h1>
      <p class="subtitle">
        The number of unique visitors is: <strong><span id="count"></span></strong>
      </p>
    </div>
  </main>
  <script>
    var eventSource = new EventSource("http://127.0.0.1:3333/visitors");

    const count = 0;
    eventSource.onmessage = function(e) {
        const data  = JSON.parse(e.data)
        //const count = omit(data, 'mz_timestamp', 'mz_diff', 'mz_progressed')
        const { mz_diff, mz_progressed } = data;
        data.forEach(entry => {
          if(entry.mz_diff == -1){
            console.log('Old count: ' + entry.count)
          } else {
            console.log('New count: ' + entry.count)
            let countDiv = document.getElementById("count");
            countDiv.innerHTML = entry.count;
          }
        })
    };
  </script>
</body>
</html> A quick rundown of the main things to keep in mind: : First we define a new and specify our endpoint. new EventSource EventSource /visitors : Then we listen for new messages to show in the EventStream. eventSource.onmessage : After that we parse our data JSON.parse(e.data) : Finally we run a loop and update the total unique visitors counter on the page. data.forEach Now if you were to visit your AdonisJS application you would see the following output: As you can see, rather than making a huge amount of AJAX requests, we just tap into the stream and keep our web page up to date with the latest changes from Materialize! Conclusion This is pretty much it! You've now built a web application using AdonisJS that connects to Materialize and pulls the number of unique visitors from your application as new data is logged. As a next step, make sure to head over to the Materialize Docs and try out some of the available demos: Materialize Demos To learn more about AdonisJS, you can also find the documentation here: AdonisJS documentation You can find a link to the AdonisJS source code from this demo here: Streaming Data wiht Materialize and AdonisJS Demo files To learn more about Streaming SQL, make sure to check out this post here: Streaming SQL: What is it, why is it useful? Hope that this was helpful! First published here

Stream and Display Data in Realtime with Materialize and Adonis

In the “ ” article, I navigated the course for introducing a Spring Boot service that would leverage the well-established Salesforce RESTful API. The goal of this service was to act as a middleware layer; that way, clients not written in Salesforce could retrieve and update contact data stored in Salesforce. This backend service implemented its own caching layer to provide a faster response time and also cut down on the number of times Salesforce needed to be called. Leveraging Salesforce Using Spring Boot In “ ,” I introduced a simple client written in Svelte, which made it possible to update the Salesforce data using an inline editor—again, without actually using the Salesforce client. Leveraging Salesforce Using a Client Written In Svelte The “ ” article introduced a client application using the Vue.js framework to further interact with the Spring Boot service. Using Vue.js, the resulting client was not only able to read data from Salesforce but also processed and displayed updates made to the Salesforce data via a server-sent events (SSE) implementation. Leveraging Salesforce Using a Client Written In Vue.js The fourth article in the series, “ ,” introduced native mobile applications for Android and iOS devices leveraging a single source codebase written in React Native. This new client offering allowed senior executives to monitor the progress of the Salesforce data. Leveraging Salesforce Using Mobile Applications Written (Once) In React Native In this article, we will use the Angular framework to complete a new feature request. In this example, the same contact data from Salesforce will be utilized in a drop-down list to avoid having a different source of contact data. Revisiting the Example Use Case Let’s briefly recap our example use case: The Business Call Center is about to launch a major marketing campaign. However, they recently discovered that the title generated for the list of contacts was incorrect approximately 90% of the time. A team of interns has been updating contacts using the Svelte client, and the managerial team has been using the Vue.js client to monitor the updates as they occur, complete with server-sent events appearing as toast messages. Executives have been monitoring the progress using their Android and iOS devices from native clients which have been deployed. The feature team responsible for the new widget product line has realized that they too can benefit from the contact information stored in Salesforce. The following requirements have been added to the widget application: The new widget form requires a contact field. The selection options for the contact field will be a drop-down list. The source data will be a dynamic list of contacts from Salesforce. Each selection option will present the contact’s full name with their title in parentheses (if available). As changes are made to contacts in Salesforce, the list of contact selection options should automatically update (including the title value). The feature team for the widget product line is planning to start this work right away and should have everything they need based upon the results of prior work completed for this series. As a point of reference, below is a link to the Spring Boot service which has been used for this entire series: https://gitlab.com/johnjvester/salesforce-integration-service Why Angular? is a TypeScript-based web client framework that is led by and fueled by a very large open-source community. Of all the frameworks I have used in this series, Angular is certainly the largest—almost to the point where it may be better to call it a platform. Angular Google Some benefits of using Angular are noted below: Designed to handle enterprise web applications, accommodating next-generation design patterns, including . progressive web applications Continues to evolve with a dedicated open-source community. This leads to an impressive bug/resolution time frame and a large library of third-party solutions or dependencies which can be added to any modern Angular project. Supported by Google, serving as the primary web-client framework for technology powerhouses that include Gmail, Microsoft Office, PayPal, Upwork (freelance program), and Samsung. Personally, I have been involved with enterprise web applications running in both AngularJS and Angular since early 2014. While Angular is designed to handle large-scale applications, I have been equally successful in using the same framework for small and simple applications. Getting Started with Angular For this article, I decided to step outside of my comfort zone by giving version 12 of Angular a try. (As a point of reference, I last used version 9 for the fitness application I wrote for my sister-in-law in my “ ” series last year.) Using Heroku to Quickly Build a Multi-Tenant SaaS Product Since my Angular command-line interface (CLI) was still on version 9, I needed to use the following command to upgrade to version 12 of the Angular CLI: npm install -g @angular/cli First-time users can use this same command as well. Issuing an command provided me with the following results: ng version _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 12.2.0
Node: 14.15.5
Package Manager: npm 6.14.11
OS: darwin x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1202.0 (cli-only)
@angular-devkit/core         12.2.0 (cli-only)
@angular-devkit/schematics   12.2.0 (cli-only)
@schematics/angular          12.2.0 (cli-only) To create a new Angular 12 application, I issued the following Angular CLI command: ng new salesforce-integration-angular The Angular CLI created the application in a new folder called salesforce-integration-angular. Below is a summary of some of the command’s output: ? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
...
✔ Packages installed successfully. At this point, I used the command to show the newly created Angular application: ng serve Of course, there is not a lot there, but at least the Angular application started in a matter of seconds. Adding Some Dependencies The requirements for the widget application contained an interesting business rule. To avoid having to scroll back to the top of the page, I captured the information below: As changes are made to contacts in Salesforce, the list of contact selection options should automatically update (including the title value). This requirement translates to the widget application having to maintain the current state of the contact objects. Meaning, the contact list information always needs to be current. In the “Leveraging Salesforce Using a Client Written In Vue.js” article, the Spring Boot service was updated to broadcast SSEs as changes were made to the state of the contacts stored in Salesforce. The Angular application will also need to listen to those same SSEs. However, with the Angular application, I decided to use @ngrx/store, which is a Redux-inspired global state management for Angular applications—powered by RxJS. What this means is that I will wire the SSEs from Spring Boot to maintain the state of Salesforce contacts inside the browser. Then, the widget component can employ a reactive design to always have the latest changes—without having to make another call to the Spring Boot service. Adding the ngrx/store dependency to the Angular 12 application required a simple command: npm install @ngrx/store --save With this single dependency added to the project, I can focus on creating the widget component in Angular. Creating the Widget Component For this simple example, launching the Angular 12 application will present a new widget form. Because we’re keeping things simple, the form will look like this: The model field will be a freeform text field and the contact field will contain a dynamic list of Salesforce contacts, kept up to date via the SSE listeners communicating with NgRx. Creating a new component using the Angular CLI requires the following command: ng generate component widget The Angular CLI responds with the following status updates: CREATE src/app/widget/widget.component.css (0 bytes)
CREATE src/app/widget/widget.component.html (21 bytes)
CREATE src/app/widget/widget.component.spec.ts (626 bytes)
CREATE src/app/widget/widget.component.ts (275 bytes)
UPDATE src/app/app.module.ts (727 bytes) As a result, a widget component has been created and is ready to use in the folder of the Angular 12 application. /src/app/widget Configuring NgRx Rather than include all of the necessary information around configuring NgRx here, the following link to the NgRx website provides a great amount of detail: https://ngrx.io/guide/store#ngrxstore Part of this documentation includes the following diagram: At a high level, we’ll add the following elements to the Angular 12 application: ContactService: to make API calls to Spring Boot, allowing for us to receive contacts. EventService: to make the connection to the SSE URI running in the Spring Boot service. ContactEffect: to register event listeners and load the original contacts from the Spring Boot service. ContactAction: to describe the events that are dispatched from the ContactService. ContactReducer: to ensure the state changes are being processed. ContactSelector: to select and derive contact information from the store. WidgetComponent: to listen to the ContactAction and receive data from the ContactSelector. Let’s dive into the code and see how this looks in TypeScript. ContactService The ContactService handles making basic API calls to the Spring Boot service that has been used throughout this series. The Angular 12 client will simply make a call to the /contacts URI and return an “observable” containing a list of contact objects: export class ContactService {
  constructor(private http: HttpClient) { }

  getContacts(): Observable<Contact[]> {
    return this.http.get<Contact[]>( environment.api + '/contacts')
      .pipe(
        retry(1),
        catchError(this.handleError)
      )
  }
} EventService The EventService establishes a connection to the URI in Spring Boot which is broadcasting SSE updates. I added the method to make the connection: getServerSentEvent() getServerSentEvent(): Observable<any> {
    return Observable.create((observer: { next: (arg0: any) => void; error: (arg0: any) => void; }) => {
      const eventSource = this.setSource();
      eventSource.onmessage = event => {
        this.zone.run(() => {
          observer.next(event);
        });
      };
      eventSource.onerror = error => {
        this.zone.run(() => {
          observer.error(error);
        });
      };
    });
  } When a SSE arrives, the method is called: _onMessage() private _onMessage(e: MessageEvent): void {
    const message = JSON.parse(e.data);
    if (message) {
      this.dispatchActionInNgZone(processSseUpdate(message));
    }
  } This in turn dispatches the action into the NgZone: private dispatchActionInNgZone(action: Action): void {
    this.zone.run(() => this.store.dispatch(action));
  } ContactEffect The ContactEffect registers an event listener to the EventService, updates contacts from SSE messages that are received, and loads the original contacts from the Spring Boot service. registerEventListener$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(ContactActionTypes.AllContactsLoaded),
        tap(action => {
          this.eventListenerService.register();
        }),
        repeat()
      ),
    { dispatch: false }
  );

  updateContactFromSSE$ = createEffect(() =>
    this.actions$.pipe(
      ofType(processSseUpdate),
      map( payload => {
        const anyContact:any = (payload as any);
        const contact = (anyContact as Contact);
        const updatedAction:Update<Contact> = {
          id: contact.id,
          changes: { ...contact }
        };
        return new ContactUpdated({contact: updatedAction});
      })
    )
  );

  loadAllContacts$ = this.actions$.pipe(
      ofType<AllContactsRequested>(ContactActionTypes.AllContactsRequested),
      mergeMap(() => this.contactService.getContacts()),
      map(contacts => { new AllContactsLoaded({ contacts })} )
    ); ContactAction The ContactAction describes the events that are dispatched from the ContactService. export enum ContactActionTypes {
  AllContactsRequested = '[Contact API] All Contacts Requested',
  AllContactsLoaded = '[Contact API] All Contacts Loaded',
  ContactUpdated = '[Contact API] Contact Updated'
}

export class AllContactsRequested implements Action {
  readonly type = ContactActionTypes.AllContactsRequested;
}

export class AllContactsLoaded implements Action {
  readonly type = ContactActionTypes.AllContactsLoaded;
  constructor(public payload: { contacts: Contact[] }) { }
}

export class ContactUpdated implements Action {
  readonly type = ContactActionTypes.ContactUpdated;
  constructor(public payload: { contact: Update<Contact> }) { }
}

export type ContactActions = AllContactsRequested |  AllContactsLoaded | ContactUpdated; ContactReducer The ContactReducer makes sure the state changes are processed. export function contactReducer(state = initialContactsState, action: ContactActions): ContactsState {
  switch(action.type) {
    case ContactActionTypes.AllContactsLoaded:
      return adapter.setAll(action.payload.contacts, {...state, allContactsLoaded: true });
    case ContactActionTypes.ContactUpdated:
      return adapter.updateOne(action.payload.contact, state);
    default: {
      return state;
    }
  }
} WidgetComponent Finally, the WidgetComponent leverages all the NgRx state-management elements to provide a dynamic and self-updating list of contact information from Salesforce via the Spring Boot service and SSE URI. The method connects to the NgRx store, then receives the original list of contacts: ngOnInit() ngOnInit(): void {
    this.widget.model = "Some Model Description Goes Here";

    this.contactService.getContacts().subscribe((data) => {
      this.store.dispatch(new AllContactsLoaded({ contacts: data }));
      this.loading = false;
    });
  } With the NgRx implementation in place, updates will be processed as they are received from the Spring Boot service over the SSE URI. To make sure the Widget component is displayed when Angular starts, I reduced the app.component.html file to a single line: <widget></widget> Using the Angular Application Using ng serve from the Angular CLI, we start up the Angular 12 application with all of the above changes in place. This displays the widget form, showing the contact data from Salesforce in the drop-down list: Using the following cURL command, I updated the title for Rose Gonzales from “SVP, Procurement” to “SVP, Information Technology.” curl --location --request PATCH 'http://localhost:9999/contacts/0035e000008eXq0AAE' \
--header 'Content-Type: application/json' \
--data-raw '{
    "Title": "SVP, Information Technology"
}' The PATCH command resulted in an HTTP status code of 202 (Accepted) and returned the following payload: {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v52.0/sobjects/Contact/0035e000008eXq0AAE"
    },
    "id": "0035e000008eXq0AAE",
    "Name": "Rose Gonzalez",
    "Title": "SVP, Information Technology",
    "Department": "Procurement"
} Without making any changes to the widget form, the drop-down list options now appear like this: Notice how the contact title changed automatically for Rose Gonzalez. Conclusion Starting in 2021, I have been trying to live by the following mission statement, which I feel can apply to any IT professional: “Focus your time on delivering features/functionality which extends the value of your intellectual property. Leverage frameworks, products, and services for everything else.” J. Vester In this article, I created a widgets component using Angular 12 which included a drop-down list of contacts populated with data from within the Salesforce implementation. I added NgRx state-management functionality to listen for SSE messages from Spring Boot in order to keep the list of contacts current. In this case, I leveraged the powerful NgRx state-management framework to do the work for me—requiring very few changes to the widget component at all. Similar to my experiences with Svelte, Vue.js, and React Native, the time to create a ready-to-deploy component was very fast, measured in minutes rather than hours. Just like in all of this series’ articles, we have been able to use Salesforce without actually using a Salesforce client. Of course, a production-ready scenario would require some additional work to prepare this application for “prime time” use. If you are interested in the source code used for the Angular client, simply navigate to the following repository on GitLab: https://gitlab.com/johnjvester/salesforce-integration-angular In the next article of this series, I plan to turn things 180 degrees and use Lightning Web Components (LWC) outside the Salesforce ecosystem. Have a really great day! Also published on: https://dzone.com/articles/leveraging-salesforce-using-a-client-written-in-an

How to Leverage Salesforce via a Client Written In Angular

The Eventsource interface is web content's interface to server-sent events. An Eventsource instance offers a persistent connection to an HTTP server, which sends events in text/event-stream format. Eventsources are mostly used as workflow triggers. You're adding an event source when you add a new app-based trigger to your workflow. For two reasons, event sources run as independent resources from workflows: More than one workflow can be triggered by a single event source. You can construct an event source once and use it as the trigger for each process if there is any data source that you intend to use for numerous workflows. You don't need to perform a process to consume events emitted by event sources in your own application: you can immediately receive the event data via Pipedream's REST API or a private, real-time SSE stream. The constructor returns a newly-created EventSource, which represents a remote resource.  The basic syntax of  EventSource() is given below. EventSource() eventSource = new EventSource(url, configuration); Example: evtSource = EventSource( ); eventList = .querySelector( );
evtSource.onmessage = { newElement = .createElement( );
  newElement.textContent = + e.data;
  eventList.appendChild(newElement);
}; var new 'sse.php' var document 'ul' ( ) function e var document 'li' 'message: ' How do event sources work? Data is collected from apps and services such as Github, Twitter, and Google Calendar, and then emitted as individual events via event sources. The API or SSE interfaces can be used to access these events, which trigger associated workflows. The event source employs webhooks or another mechanism for real-time data delivery if the service supports them. Google Sheets, for example, offers webhooks, which allow event sources in Google Sheets to send out updates quickly. Pipedream monitors the API for changes every few minutes if a service doesn't allow real-time event delivery, and emits events as the API generates them. We poll their API for new records added to a table because Airtable doesn't support webhooks. Creating event sources The Pipedream UI and CLI can both be used to create event sources. Using the UI to create a source To create a new event source, go to and select the New + button in the top right corner. A list of sources linked to apps (such as Twitter and Github) and generic interfaces will appear (like HTTP). https://pipedream.com/sources Select your source, and you'll be prompted to link any necessary accounts (the Twitter source, for example, requires you to provide Pipedream access to your Twitter account), as well as enter the values for any source-specific configuration options. You can use a source to trigger Pipedream workflows or consume its events using Pipedream's APIs once you've created it. Using the CLI to create a source This will open an interactive menu that will ask you to choose a source. Once you've chosen a source, you'll be prompted to link any required accounts (for example, the Twitter source requires you to provide Pipedream access to your Twitter account) and input the values for any source-specific configuration options. You can use a source to trigger Pipedream workflows or consume its events using Pipedream's APIs once you've created it. Taking in events from several sources The events for a source can be found in the source's UI, under the Events section. A Pipedream process can also be started whenever your source produces a new event. This allows you to create workflows for every new tweet, RSS feed item, and more. Finally, there are a couple of ways to consume events programmatically outside of the Pipedream platform: Using the SSE stream connected to your source in real-time. Using the CLI's pd events command in real-time. Using the REST API in batches.

A Quick Guide to EventSource or SEE

In this pandemic, a lot has changed with work culture. Something we can’t get rid of yet is . While at one of those meetings, I got curious about the and after some search came to know what our browsers are capable of (inbuilt browser APIs). Remote Meetings Google meeting platform So, I planned to develop a free simple recorder that supports Audio, Video, and Screen Recording available at http://recorder.dhruv479.dev To proceed further, you should be acquainted with some terms: The MediaRecorder interface of the provides functionality to easily record media MediaRecorder: MediaStream API ref: MDN The MediaDevices interface provides access to connected media input devices like cameras and microphones, as well as screen-sharing MediaDevices: ref: MDN Ok, ready to roll? let’s add some code! At first, we will write a function that intakes the stream and mimeType, collect the data chunks and then enable downloading the file on the local machine from the browser. Recording Handler: handleRecord = { recordedChunks = [];
  stopped = ; mediaRecorder = MediaRecorder(stream);

  mediaRecorder.ondataavailable = { (e.data.size > ) {
      recordedChunks.push(e.data);
    } (shouldStop === && stopped === ) {
      mediaRecorder.stop();
      stopped = ;
    }
  };
  mediaRecorder.onstop = { blob = Blob(recordedChunks, { : mimeType
    });
    recordedChunks = [] filename = .prompt( ); downloadLink.href = URL.createObjectURL(blob); downloadLink.download = ; stopRecord();
  };

  mediaRecorder.start( ); }; const ( ) function {stream, mimeType} // to collect stream chunks let false const new ( ) function e if 0 // shouldStop => forceStop by user if true false true ( ) function const new type const window 'Enter file name' // input filename from user for download // create download link for the file ` .webm` ${filename} // naming the file with user provided name 200 // here 200ms is interval of chunk collection First, create a MediaRecorder instance with the input stream. Then, add events for ondataavailable (when data comes in-stream) and onstop (when the stream stops). After chunk is available, it is pushed in the array and after the stop event, all the chunks are put together to form a specifying the mimeType. Blob Later, URL is created for the blob object and can be downloaded from the browser. Going forward, we will write a function to invoke the audio recording that further calls handleRecord with the required parameters. Audio Recorder: { mimeType = ;
  shouldStop = ; stream = navigator.mediaDevices.getUserMedia({ : });
  handleRecord({stream, mimeType})
} async ( ) function recordAudio const 'audio/webm' false const await audio true Here, we will use mediaDevices.getUserMedia to get access to resources on the user’s machine. After calling this,  we will get a prompt asking for permission in the browser and after confirmation, we can access those resources. Also, we can pass additional parameters to the constraints like audio: { echoCancellation: true } which reduces the sound echo. Similar to Audio Recording, we need to add video in the parameter of the function. Video Recorder: getUserMedia { mimeType = ;
  shouldStop = ; constraints = { : , : ,
  }; stream = navigator.mediaDevices.getUserMedia(constraints);
  handleRecord({stream, mimeType})
} async ( ) function recordVideo const 'video/webm' false const audio true video true const await After adding video constraint in getUserMedia, you will get an additional prompt to camera permission and after the confirmation, guess what, we can access the camera stream. Also, additional params can be passed to video such as: video: { width: {min: 640}, height: {min: 480}} Amongst all, this is the most interesting, as the display stream is provided by getDisplayMedia, and the audio is provided by getUserMedia. So, we need to merge different streams here if need an audio background for the screen record. Screen Recorder: { mimeType = ;
  shouldStop = ; constraints = { : }; displayStream = navigator.mediaDevices.getDisplayMedia({ : , : }); voiceStream = navigator.mediaDevices.getUserMedia({ : , : }); tracks = [...displayStream.getTracks(), ...voiceStream.getAudioTracks()] stream = MediaStream(tracks);
  handleRecord({stream, mimeType})
} async ( ) function recordScreen const 'video/webm' false const video true const await video true audio true // voiceStream for recording voice with screen recording const await audio true video false let const new We merged the different streams to create a new stream and passed it to the handleRecord function. Here also, we can add more specific constraints as per the need. Constraints passed to capture media can be more specific like resolution, echo, cursor instead of true/false. Conclusion Voila, well the JavaScript part is done 😁. We just need to add some basic HTML to invoke those functions, stop recording, and of course, download the file. Here is a reference to the complete code: https://github.com/dhruv479/recorder/blob/master/index.html Also published at https://dhruv479.medium.com/583584dd3c75

Here's How I Built a Video, Audio, and Screen Recorder Web App with JavaScript

How I built this: Machine learning with Amazon Personalize and a Customer Data Platform

emerged from Google out of a need to build highly performant applications using an easy-to-understand syntax. It's a statically typed, compiled language developed by some of the innovators of C, without the programming burden of manual memory management. Primarily, it was designed to take advantage of modern multicore CPUs and networked machines. Go In this post, I'll demonstrate the capabilities of Go. We'll take advantage of Go's ability to easily create concurrent apps to build a chat app. On the backend, we'll use Redis as the intermediary to accept messages from the browser and send them to the subscribed clients. On the frontend, we'll use websockets via to facilitate the client-side communication. We'll deploy it all on , a PaaS provider that makes it easy to deploy and host your apps. Just as Go makes programming such an application simple, Heroku makes it easy to supplement it with additional infrastructure. socket.io Heroku Channels in Go What developers find appealing about Go is its ability to communicate concurrently, which it does through a system called channels. It's important to draw upon . Parallelism is the process by which a CPU executes multiple tasks at the same time, while concurrency is the CPU's ability to switch between multiple tasks, which start, run,  and complete while overlapping one another. In other words, parallel programs handle many operations at once, while concurrent programs can switch between many operations over the same period of time. an oft-cited distinction between concurrency and parallelism A channel in Go is the conduit through which concurrency flows. Channels can be unidirectional—with data either sent to or received by them—or bidirectional, which can do both. Here's an example that demonstrates the basic principles of concurrency and channels: func one(c1 chan string) { i := ; i < ; i++ {
    c1 <- }
  close(c1)
}

func two(c2 chan string) { i := ; i < ; i++ {
    c2 <- }
  close(c2)
}

func main() { := make(chan string)
  c2 := make(chan string)

  go one(c1)
  go two(c2) {
    select { msg, := for 0 5 "Channel One" for 0 5 "Channel Two" c1 for case ok < ( ) ! { = } , = < ( ) ! { = }
    } == && == { }
  }
} -c1: fmt.Println msg if ok c1 nil case msg ok : -c2: fmt.Println msg if ok c2 nil if c1 nil c2 nil break . Channels are created by first specifying the data type which they will communicated with—in this case, string. Two , one and two, accept each of these channels as an argument. Both then loop five times, passing a message to the channel, which is indicated by the <- glyph. Meanwhile, in the main function, an infinite for loop, waits for messages to come in from the channels. The select statement picks the channel which has a pending message, prints it, and moves on. If the channel was closed (which is important not just for memory management, but to also indicate that no more data will be sent), the channel is set to nil. When both channels are nil, the loop breaks. You can run this example online at the Go Playground to see the results goroutines In essence, a receiver is waiting endlessly to receive packets of data. When it receives the data, it acts upon it, then continues to wait for more messages. These receivers operate concurrently, without interrupting the rest of the program's flow. For this chat application, we will wait for a user to send a message to a receiver over a channel. When the message is received, the app will broadcast it to the frontend, so that everyone sitting in chat can read the text. Prerequisites You should have a relatively recent version of Golang installed; anything past 1.12 will do. Create a directory in your called heroku_chat_sample. If you'd like to run the code locally, you can also install and run a server—but this is definitely not required, as a Heroku add-on will provide this for us in production. GOPATH Redis Building a Simple Server Let's start with a quick and easy "Hello World" server to verify that we can run Go programs. We'll start by fetching , a web toolkit that simplifies the process of writing HTTP servers: Gorilla go get -u github.com/gorilla/mux Next, create a file called main.go, and paste these lines into it: package main ( )

func main() { := mux.NewRouter()
  r.HandleFunc( , func(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, )
  })
  log.Print( )
  http.ListenAndServe( , r)
} import "fmt" "log" "net/http" "github.com/gorilla/mux" r "/" "Hello, world!" "Server starting at localhost:4444" ":4444" Finally, enter in your terminal. You should be able to visit localhost:4444 in the browser, and see the greeting. With just these few lines, we can get a better sense of how to create routes using Gorilla. go run main.go But static text is boring, right? Let's have this server show an HTML file. Create a directory called public, and within that, create a file called index.html that looks like this: Go Chat! Go Chat! Send <!DOCTYPE html> < > html < > head < > title </ > title < = = /> link rel "stylesheet" href "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" < = = /> meta name "viewport" content "width=device-width, initial-scale=1.0" </ > head < > body < = > div class "container" < = > div class "jumbotron" < > h1 </ > h1 </ > div < = = > form id "input-form" class "form-inline" < = > div class "form-group" < = = = = /> input id "input-username" type "text" class "form-control" placeholder "Enter username" </ > div < = > div class "form-group" < = = = = /> input id "input-text" type "text" class "form-control" placeholder "Enter chat text here" </ > div < = = > button class "btn btn-primary" type "submit" </ > button </ > form < = > div id "chat-text" </ > div </ > div </ > body < = = > script type "text/javascript" src "app.js" </ > script </ > html There's some JavaScript necessary for this page to communicate with the server; let's create a placeholder app.js file now: .addEventListener( , (_) => {
  form.addEventListener( , {
     event.preventDefault(); username = .getElementById( ); text = .getElementById( );
     text.value = ;
  });
}); window 'DOMContentLoaded' "submit" ( ) function event let document "input-username" let document "input-text" "" Then, let's change our server code to look like this: package main ( )
func main() {
  http.Handle( , http.FileServer(http.Dir( )))
  log.Print( ) err := http.ListenAndServe( , nil); err != nil {
    log.Fatal(err)
  }
} import "log" "net/http" "/" "./public" "Server starting at localhost:4444" if ":4444" If you restart the server and head back to localhost:4444, you should see a page inviting you to chat. It won't do much yet, but it's a start! Sample of the chat application Let's make one more minor change to see this app on the way to becoming : store our port number in an environment variable. This won't be hugely important right now in development, but it will make a difference when we deploy the app to production. a twelve-factor app Create a file called .env and paste this line into it: PORT= 4444 Then, fetch the modules: godotenv go get github.com/joho/godotenv And lastly, let's change the server code one more time to accept this environment variable: err := godotenv.Load() err != nil {
  log.Fatal( )
}

port := os.Getenv( ) err := http.ListenAndServe( +port, nil); err != nil {
  log.Fatal(err)
} if "Error loading .env file" "PORT" // Same code as before if ":" In short, so long as GO_ENV is empty, we will load our environment variables from whatever is defined locally in .env. Otherwise, the app expects the environment variables to be set by the system, which we will do when the time comes. Establishing Communication Using websockets and Redis are a useful technique to pass messages from the client/browser to the server. It will be the fundamental technology used to send and receive chat messages from all the users in our chat room. On the backend, we will use Redis to store the chat history, so that any new user can instantly get all of the room's previous messages. Redis is an in-memory database, which is often used for caching. For this project, we don't need the heft of a relational database, but we do want some kind of storage system to keep track of users and their messages. Websockets Setting up Redis To start with, let's prepare to introduce Redis as a dependency. If you have Redis running locally, you'll need to add a new line to specify the host and port of your Redis instance in your .env file: REDIS_URL= : 127.0 .0 .1 6379 Grab the Redis module as a dependency from GitHub: go get -u github.com/gomodule/redigo/redis We'll set up our Redis client as a global variable to make life easier: (
  rdb *redis.Client
) var Then, in our main() function, we will create an instance of this client via the environment variable: redisURL := os.Getenv( )
opt, := redis.ParseURL(redisURL) err != nil {
  panic(err)
}
rdb = redis.NewClient(opt) "REDIS_URL" err if We're using environment variables here because the server address is likely to be different than the one we use in development, but we don't want to hardcode those values. If you don't have a Redis server running locally, don't worry—you can still follow along in the tutorial, and see the result in your browser live after we publish the app to Heroku. When the server starts up, it'll connect to Redis first before listening for any incoming connections. Setting up websockets Configuring our websockets is a little bit trickier, particularly because we need to jump into some JavaScript code to finish wiring that up. However, before we get there, let's take a step back and remember what we're trying to do. A user will visit a webpage, assign themselves a username, and send messages in a chat room. It's fair to say that the smallest chunk of data would be the user's name and their message. Let's set up a data structure in Go that captures this: type ChatMessage struct {
  Username string Text     string } `json:"username"` `json:"text"` Since we're going to be communicating with the frontend, it's useful to prepare to think about this structure in terms of how it will be represented in JSON. Next, let's add two more lines of functionality to our web server in main(). The first line will indicate which function we want to run whenever a new websocket connection is opened—in other words, whenever a new user joins. The second line will set up a long-running goroutine which decides what to do whenever a user sends a message: http.HandleFunc( , handleConnections)
go handleMessages() "/websocket" Last, let's jump back to the top of the file and add some global variables. We'll explain what they're for after the code: clients = make(map[*websocket.Conn]bool) broadcaster = make(chan ChatMessage) upgrader = websocket.Upgrader{ : func(r *http.Request) bool {
  returntrue
},
} var var var CheckOrigin In these lines: clients is a list of all the currently active clients (or open websockets) broadcaster is a single channel which is responsible for sending and receiving our ChatMessage data structure upgrader is a bit of a clunker; it's necessary to "upgrade" Gorilla's incoming requests into a websocket connectionSending a Message Let's start building out handleConnections first. When a new user joins the chat, three things should happen: They should be set up to receive messages from other clients. They should be able to send their own messages. They should receive a full history of the previous chat (backed by Redis). Addressing number one is simple with Gorilla. We'll create a new client, and append it to our global clients list in just a few lines: ws, := upgrader.Upgrade(w, r, nil) err != nil {
  log.Fatal(err)
} defer ws.Close()
clients[ws] = err if // ensure connection close when function returns true Let's look at sending messages next instead: { msg ChatMessage err := ws.ReadJSON(&msg) err != nil { (clients, ws) } broadcaster <- msg
} for var // Read in a new message as JSON and map it to a Message object if delete break // send new message to the channel After a client websocket is opened and added to the clients pool, an infinite for loop will run endlessly. Unlike other languages, infinite loops are practically encouraged in Go. The trick is to remember to break out of them, and to clean up after yourself when you do. Here, the websocket is just endlessly looking for messages that the client has sent: ws.ReadJSON(&msg) is checking to see if msg is populated. If msg is ever not nil, it'll send the message over to the broadcaster channel. That's pretty much it as far as sending messages goes. If this websocket has an issue afterwards, it'll remove itself from the clients pool--delete(clients, ws), and then break out of this loop, severing its connection. What happens when a msg is sent to the broadcaster channel? That's where handleMessages comes in. Receiving Messages It's the responsibility of handleMessages to send any new messages to every connected client. Just like the sending of messages, it all starts with an infinite for loop: func handleMessages() { { msg := for // grab any next message from channel < }
} -broadcaster This line does nothing until something is sent to the channel. This is the core of goroutines, concurrency, and channels. Concurrency depends on channels to communicate with one another. If there's no data being sent, there's nothing to reason about or work around. When a msg is received, we can send it to all the open clients: client := range clients { := client.WriteJSON(msg) err != nil && unsafeError(err) {
     log.Printf( , err)
     client.Close() (clients, client)
   }
} for err if "error: %v" delete We iterate over every client using the range operator; for each client, instead of reading JSON, we're writing it back out. Again, what comes after this is handled on the JavaScript side of things. If there's an issue with this write, we'll print a message, close the client, and remove it from the global list. Saving and Restoring History But what about our final feature, which requires that every new client has access to the full chat history? We'll need to use Redis for that, and in particular, two operations: Any new message should be added to a list of running messages. Any new user should receive that full list. When sending new messages, we can store them as a list in Redis using : RPUSH rdb.RPush( , json) "chat_messages" When a new user joins, we can send the entire list at once using : LRANGE chatMessages, := rdb.LRange( , , ).Result() err != nil {
  panic(err)
} err "chat_messages" 0 -1 if This application is a bit tricky, because we need to send all the messages to just a single client. However, we can assume that only new connections call handleConnections, and at any point before the infinite for loop, we can communicate to this client and send them our messages. Our code would look something like this: _, := range chatMessages { msg ChatMessage
json.Unmarshal([]byte(chatMessage), &msg)
   err := client.WriteJSON(msg) err != nil && unsafeError(err) {
     log.Printf( , err)
     client.Close() (clients, client)
   }
} // send previous messages for chatMessage var if "error: %v" delete Full Backend Code He's what our complete Go code would look like: https://gist.github.com/gjtorikian/8894dec140a6e57934572f5b447f6d51 The Frontend Since this post focuses on Go and Heroku, we won't go into many details about the JavaScript code. However, it's only about 25 lines, so there's not much to go into! Our previous index.html can stay the same. Let's replace the contents of app.js with the following: $(function () {
  let websocket = newWebSocket("wss://" + window.location.host + "/websocket");
  let room = $("#chat-text");
  websocket.addEventListener("message", function (e) {
    let data = JSON.parse(e.data);
    let chatContent = ` ${data.username} : ${data.text} `;
    room.append(chatContent);
    room.scrollTop = room.scrollHeight; // Auto scroll to the bottom
  });
  $("#input-form").on("submit", function (event) {
   event.preventDefault();
   let username = $("#input-username")[0].value;
   let text = $("#input-text")[0].value;
   websocket.send(
     JSON.stringify({
       username: username,
       text: text,
     })
   );
   $("#input-text")[0].value = "";
  });
}); < > p < > strong </ > strong </ > p Let's break this down into chunks. The first lines (let websocket and let room) just set up some global variables we can use later on. websocket.addEventListener is responsible for handling any new messages the client receives. In other words, it's the frontend code corresponding to handleMessages. When handleMessages writes JSON, it sends it as an event called message. From there, the JavaScript can parse the data out, style it a bit, and append the text to the chat room. Similarly, the form logic sends data using websockets to our previous ws.ReadJSON line. Any time the form is submitted, the JavaScript takes note of who said something and what they said. It then sends the message to the websocket so that the Go code can store it in Redis, and notify all the clients. Deploying to Heroku You're now ready to deploy this app to Heroku! If you don't have one already, be sure to create a , then install , which makes creating apps and attaching add-ons much easier. free account on Heroku the Heroku CLI First, log into your account: heroku login Next, let's create a new app using create: heroku create You'll be assigned a random name; I've got evening-wave-98825, so I'll be referring to that here. Next, create a . A Procfile specifies which commands to run when your app boots up, as well as setting up any workers. Procfile Ours will be a single line: web: bin/heroku_chat_sample Since we need Redis, we can attach the free instance for our demo app: heroku addons:create heroku-redis:hobby-dev -a evening-wave -98825 Let's build the app, and commit everything we have: go mod init
go mod vendor
go build -o bin/heroku_chat_sample -v .
git init
git add .
git commit -m "First commit of chat app" And let's send it all to Heroku: heroku git:remote -a evening-wave git push heroku main -98825 This process is all you need to deploy everything into production. If you visit the URL Heroku generated for you, you should see your chat app. It may look basic, but there's a lot going on behind the scenes! You can download all of the code used in this article . here More Information If you enjoyed how easy it was to deploy a Go app with Redis onto Heroku, this is just the beginning! Here's on building something exciting with Go. If you'd like to know more about how Go works with Heroku, here's . another tutorial another article with all the details Also published at https://dev.to/heroku/how-to-build-a-concurrent-chat-app-with-go-and-websockets-538f

How to Build a Concurrent Chat App with Go and Websockets

You will need PHP 7 or above, the Laravel CLI, Composer, Node and npm installed on your machine. You should have some knowledge of PHP and Laravel. When building large applications, making it scale is usually a concern. Stats like how long it takes for the page to load is usually very important. Thus, doing things like processing large images, sending emails and SMS can be pushed to a background queue and processed at a later time. However, because queues work in the background, they can fail sometimes. It may then be necessary to be able to monitor background queues. In this article, we will consider ways to monitor Laravel’s background queues in realtime. We will assume we created an application that sends emails. The emails are to be queued in the background and sent later. We will then have a report page with the emails that have been sent and those that haven’t. This is a screen recording of what we will be building: Tutorial requirements To follow along in this tutorial, we would need the following things: PHP 7.0+ installed on your machine. installed on your machine. Laravel CLI installed on your machine. Composer Knowledge of PHP and Laravel. installed on your machine. Node.js and NPM Basic knowledge of Vue.js and JavaScript. A Pusher application. Create one . here A Mailtrap account to test emails sent. Create one . here Once you have these requirements ready, let’s start. Setting up Your Laravel application Open the terminal and run the command below to create a Laravel application: $ laravel new app_name Setting up a database connection and migration When installation is complete, we can move on to setting up the database. Open the file and replace the configuration below: .env DB_CONNECTION=mysql    DB_HOST=127.0.0.1    DB_PORT=3306    DB_DATABASE=homestead    DB_USERNAME=homestead    DB_PASSWORD=secret with: DB_CONNECTION=sqlite This will set SQLite as our default database connection (you can use MySQL or any other database connection you want). In the terminal to the root directory of your project. Run the command below to create the SQLite database file: cd $ touch database/database.sqlite The command above will create an empty file that will be used by SQLite. Run the command below to create a migration: $ php artisan make:migration create_queued_emails_table Open up the migration file that was just created by the command above and replace the method with the code below: up public function up()    {        Schema::create('queued_emails', function (Blueprint $table) {            $table->increments('id');            $table->string('email');            $table->string('description');            $table->boolean('run')->default(false);            $table->timestamps();        });    } Now run the command below to migrate our database: $ php artisan migrate Setting up Mailtrap for email testing Open your file and enter the keys you got from the Mailtrap dashboard. The relevant keys are listed below: .env MAIL_DRIVER=smtp    MAIL_HOST=smtp.mailtrap.io    MAIL_PORT=2525    MAIL_USERNAME=null    MAIL_PASSWORD=null    MAIL_ENCRYPTION=null    MAIL_FROM="john@doe.com"    MAIL_NAME="John Doe" Now when emails are sent, the emails will be visible in the Mailtrap inbox. Setting up authentication The next thing we need to do is set up authentication. Open your terminal and enter the command below: $ php artisan make:auth This will generate an authentication scaffold. That is all that you need to do regarding authentication. Configuring Pusher Replace the keys in the file with the correct keys you got from your Pusher dashboard: PUSHER_* .env PUSHER_APP_ID="PUSHER_APP_ID"    PUSHER_APP_KEY="PUSHER_APP_KEY"    PUSHER_APP_SECRET="PUSHER_APP_SECRET" Open the terminal and enter the command below to install the Pusher PHP SDK: $ composer require pusher/pusher-php-server "~3.0" After installation is complete, open the file and scroll to the section. Replace the key with the following: config/broadcasting.php pusher options 'options' => [        'encrypt' => true,        'cluster' => 'PUSHER_APP_CLUSTER'    ], Configuring other miscellaneous things Open the file and change the to , and the to . To make sure we have the tables necessary to use as our run the command below to generate the database migration: .env BROADCAST_DRIVER pusher QUEUE_DRIVER database database QUEUE_DRIVER $ php artisan queue:table Then run the migrate command to migrate the database: $ php artisan migrate This will create the database table required to use our database as a queue driver. 💡 In a production environment, it is better to use an in-memory storage like Redis or Memcached as the queue driver. In-memory storage is faster and thus has better performance than using a relational database. Building the backend of our application Now let’s create the backend of our application. Run the command below in your terminal: $ php artisan make:model QueuedEmails This will create a new model in the directory. Open the file and replace the contents with the following: app <?php

    namespace App;

    use Illuminate\Database\Eloquent\Model;

    class QueuedEmails extends Model    {        protected $fillable = ['description', 'run', 'email'];        protected $casts = ['run' => "boolean"];    } In the code above, we define the property of the class. This will prevent a mass assignment exception error when we try to create a new entry to the database. We also specify a property which will instruct Eloquent to typecast attributes to data types. fillable casts Next, open the and and replace the contents with the code below: HomeController <?php    namespace App\Http\Controllers;

    use Mail;    use App\QueuedEmails;    use App\Mail\SimulateMail;    use Faker\Factory as Faker;

    class HomeController extends Controller    {        /**         * Create a new controller instance.         *         * @return void         */        public function __construct()        {            $this->middleware('auth');

            $this->faker = Faker::create();        }

        /**         * Show the application dashboard.         *         * @return \Illuminate\Http\Response         */        public function index()        {            return view('home', ['jobs' => $this->jobs()]);        }

        /**         * Return all the jobs.         *         * @return array         */        public function jobs()        {            return QueuedEmails::orderBy('created_at', 'DESC')->get()->toArray();        }

        /**         * Simulate sending the email.         *         * @return mixed         */        public function simulate()        {            $email = $this->faker->email;

            Mail::to($email)->send(                new SimulateMail([                    "email" => $email,                    "description" => $this->faker->sentence()                ])            );

            return redirect()->route('home');        }    } In the controller above, we have 4 methods that are mostly self-explanatory. In the class we use the which helps us generate random fake values. In the method, we are using the faker library to generate a fake email address and description. We instantiate a . Faker library simulate SimulateMail mailable Open the terminal and enter the command below: $ php artisan make:mail SimulateMail Open the class and enter the code below: SimulateMail <?php    namespace App\Mail;

    use App\QueuedEmails;    use Illuminate\Bus\Queueable;    use Illuminate\Mail\Mailable;    use Illuminate\Queue\SerializesModels;    use App\Events\{EmailQueued, EmailSent};    use Illuminate\Contracts\Queue\ShouldQueue;    use Illuminate\Contracts\Queue\Factory as Queue;    use Illuminate\Contracts\Mail\Mailer as MailerContract;

    class SimulateMail extends Mailable implements ShouldQueue    {        use Queueable, SerializesModels;

        protected $mail;

        /**         * Create a new message instance.         *         * @return void         */        public function __construct(array $mail)        {            $this->mail = QueuedEmails::create($mail);        }

        /**         * Build the message.         *         * @return $this         */        public function build()        {            return $this->subject("Queuer: Welcome to queuer")->view('email.welcome');        }

        /**         * Send the mail         */        public function send(MailerContract $mailer)        {            $this->mail->update(['run' => true]);

            event(new EmailSent($this->mail));

            parent::send($mailer);        }

        /**         * Queue the email         */        public function queue(Queue $queue)        {            event(new EmailQueued($this->mail));

            return parent::queue($queue);        }    } 💡 By implementing the **_ShouldQueue_** interface, we are telling Laravel that the email should be queued and not sent immediately. In the class above, we have a constructor that creates a new entry into the table. In the method, we build the mail message we are going to be sending. queued_emails build In the method, we mark the entry’s column to . We also fire an event called . In the method, we also trigger an event called . send queued_emails run true EmailSent queue EmailQueued Let’s create the events we triggered in the methods above. In your terminal run the command below: $ php artisan make:event EmailSent    $ php artisan make:event EmailQueued In the event class, paste the following code: EmailSent <?php    namespace App\Events;

    use App\QueuedEmails;    use Illuminate\Broadcasting\Channel;    use Illuminate\Queue\SerializesModels;    use Illuminate\Foundation\Events\Dispatchable;    use Illuminate\Broadcasting\InteractsWithSockets;    use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

    class EmailSent implements ShouldBroadcast    {        use Dispatchable, InteractsWithSockets, SerializesModels;

        public $mail;

        public function __construct($mail)        {            $this->mail = $mail;        }

        public function broadcastOn()        {            return new Channel('email-queue');        }

        public function broadcastAs()        {            return 'sent';        }    } In the code above, we just use in Laravel to send some data to Pusher. Broadcasting Open the event class and paste the code below: EmailQueued <?php

    namespace App\Events;

    use App\QueuedEmails;    use Illuminate\Broadcasting\Channel;    use Illuminate\Queue\SerializesModels;    use Illuminate\Foundation\Events\Dispatchable;    use Illuminate\Broadcasting\InteractsWithSockets;    use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

    class EmailQueued implements ShouldBroadcast    {        use Dispatchable, InteractsWithSockets, SerializesModels;

        public $mail;

        public function __construct($mail)        {            $this->mail = $mail;        }

        public function broadcastOn()        {            return new Channel('email-queue');        }

        public function broadcastAs()        {            return 'add';        }    } This class is almost the same as the event class. The minor difference is the method. It returns a different alias to broadcast the event as. EmailSent broadcastAs Finally, open the routes file and replace the code with this: routes/web.php Auth::routes();    Route::name('jobs')->get('/jobs', 'HomeController@jobs');    Route::name('simulate')->get('/simulate', 'HomeController@simulate');    Route::name('home')->get('/home', 'HomeController@index');    Route::view('/', 'welcome'); Great! Now let’s move on to the frontend of the application. Building the frontend of our application Now that we have set up most of the backend, we will create the frontend of the application. Open the file and replace the code with the following: resources/views/home.blade.php @extends('layouts.app')

    @section('content')    <div class="container">        <div class="row">            <div class="col-md-12">                <div class="panel panel-default">                    <div class="panel-heading clearfix">                        <span class="pull-left">Queue Reports</span>                        <a href="{{ route('simulate') }}" class="btn btn-sm btn-primary pull-right">Simulate</a>                    </div>                    <div class="panel-body">                        <jobs :jobs='@json($jobs)'></jobs></jobs>                    </div>                </div>            </div>        </div>    </div>    @endsection The noteworthy aspect of the code above is the tag. This is a reference to the Vue component we will create next. We also have a “Simulate” button that leads to a route. This route simulates queuing an email to be sent. jobs /simulate Open your terminal and type in the command below: $ npm install --save laravel-echo pusher-js This will install and the . When the installation is complete, run the command below to install the other NPM dependencies: Laravel Echo Pusher JS SDK $ npm install Building our Vue component Let’s build the Vue component we referenced earlier. Open the file and replace the code below: jobs resources/assets/js/app.js Vue.component('example', require('./components/ExampleComponent.vue')); with: Vue.component('jobs', require('./components/JobsComponent.vue')); Now create a new file in the directory. In the file, paste in the following code: JobsComponent.vue resources/assets/js/components/ <template>        <table class="table">            <tbody>                <tr v-for="(job, index) in allJobs" :key="index" v-bind:class="{success: job.run, danger: !job.run}">                    <td width="80%">{{ job.description }}</td>                    <td>{{ job.created_at }}</td>                </tr>            </tbody>        </table>    </template>

    <script>    export default {        props: ['jobs'],        data() {            return {allJobs: this.jobs}        },        created() {            let vm = this            vm.refreshAllJobs = (e) => axios.get('/jobs').then((e) => (vm.allJobs = e.data))            Echo.channel('email-queue')                .listen('.add', (e)  => vm.refreshAllJobs(e))                .listen('.sent', (e) => vm.refreshAllJobs(e))        }    }    </script> In the Vue component above, we have defined a . In there, we loop through the array and list each job’s description and timestamp. template jobs In the method of the Vue component , we have a function that uses (a HTTP request library built-in Laravel by default) to make a request to the route. We then assign the response to the property. created script refreshAllJobs Axios /jobs allJobs In the same method, we use to listen to a Pusher channel and wait for an event to be triggered. Whenever the events and are triggered, we call the method. Laravel Echo .add .sent refreshAllJobs 💡 The event names have a dot before them because, in Laravel, whenever you use the **_broadcastAs_** method to define an alias you need to add the dot. Without the dot your event will not be caught by the listener. If you do not provide an alias, Laravel will use the namespace + class as the name of the broadcast event. Open the file. At the bottom of the file, add the following code: resources/assets/js/bootstrap.js import Echo from 'laravel-echo'

    window.Pusher = require('pusher-js');

    window.Echo = new Echo({        broadcaster: 'pusher',        key: 'PUSHER_APP_KEY',        encrypt: true,        cluster: 'PUSHER_APP_CLUSTER'    }); ⚠️ Make sure you replace the **_PUSHER_APP_KEY_** and **_PUSHER_APP_CLUSTER_** with your Pusher application key and cluster. Finally, run the command below to build your assets: $ npm run dev Testing our application After the build is complete, start a PHP server if you have not already by running the command below: $ php artisan serve This will create a PHP server so we can preview our application. The URL will be provided on the terminal but the default is . http://127.0.0.1:8000 When you see the Laravel homepage, create a new account using the ”Register” link on the top right corner of the page. Now click the “Simulate” button and you should see a new queued email entry. Now we will manually execute the processes on our queue using the artisan command. Open a new terminal window and run the command below: queue:listen $ php artisan queue:listen This should start executing any queues it sees. As long as the terminal is open and the command is running, when you click the “Simulate” button the queue will run immediately. If you kill the command, the queue entries will remain there and not be triggered. queue:listen queue:listen 💡 In a production environment, you cannot keep **_queue:listen_** running and you might need a worker running on a background process; something like Supervisor . You can read more about how you can do that here . Conclusion In this article, we have been able to create a realtime Laravel queue monitor using Pusher and Vue. Having queues that you can track and quantify can be useful. Hopefully, you picked something from this article. If you have any questions or feedback, feel free to ask in the comments section. The source code is available on . GitHub This post was first published on Pusher.

Monitoring Laravel’s background queues in realtime

How to build a recipe app using Vue.js and Vuex

React VR framework to create web based virtual reality apps — what a staggering initiative! In December last year Oculus announced the pre-release profiting from React Native technology. It means new and simpler opportunities both in making and viewing VR experiences. Hence the next question emerges: how much does it cost to create VR web apps and how to do a sample React VR app. In this article our dev team is going to showcase the possibilities of React VR Oculus. We’ll make a simple , a 360-degree virtual reality tour to view in a web browser. With this technology you can even try out virtual reality without a VR headset, which is awesome. React VR example But first things first. What is React VR? What is React VR? React VR is a JavaScript library (framework) that has been developed by Oculus with the aim of creating . It is a part of bigger React entity. is a JavaScript library (framework) by Facebook for building interactive UIs for web and mobile environments. is used to build mobile apps on JS, specifically. web-based virtual reality applications React React Native According to Oculus, React JS VR projects are going to run on the VR web browser under the name . The pre-packed release of is available for download with the source code on Github for preview so that anyone could give feedback. Carmel React VR app Thus, it is a great tool for any web developer and/or VR developer. Why? Because of ability to start making VR web apps even without a VR headset in possession. What is WebVR + QUIZ on Virtual Reality , the experimental API that makes it easier to create VR experiences for web. Some call it a — in a way that anyone could try virtual reality directly in a browser. And yet, no need for VR devices like Google Cardboard, Oculus Rift or HTC Vive. WebVR VR web browser It is similar to 360-videos like you’ve seen on YouTube. But most noteworthy you can navigate through it in as well. WebVR also works in pairing with React VR library and Carmel VR browser. Now, to spice things up a little bit, we’ve prepared a little for you to determine how well you are familiar with VR technology. Answer 10 basic questions and press Submit for results. quiz Our demo project Here we will be creating a small VR web application — of virtual reality tours in 360-degree view and navigation. We’ll use of panoramic images by Oculus, which would look something like this in your browser: a React VR example React VR sample There will be few locations, like restaurants and coffee shops for users to see in all-round view. We will also add rotation and buttons (arrows) to point out possible directions to enter other locations. As a result, it is going to serve as short and plain demonstration of how React VR works and its possibilities. We’ll go in step by step mode, showing code samples of our React VR project. In the end you’ll also find our team’s estimate for how much does it cost to create VR web apps with React VR. The final version of our VR tour for web browsers will consist of 5 locations, much as these: Technical requirements To create a React VR app one has to have installed first of all. This JavaScript environment powers code compiling and running a local server. One most probably also needs , a package manager by Node.js with lots of libraries and reusable code. Same, as possible additional 3D library. Node.js NPM Three.js With and APIs we can already render 3D imagery within a web browser. Since you do not need any special VR devices or headsets to build a React VR app, just basic stuff is enough. What you actually do need along React VR for making web apps is: WebVR WebGL A PC/laptop on Windows A compatible browser A latest Node.js version A VR headset (optional) What are the compatible VR web browsers? React VR framework is usually layered this way: . OVRUI by the way, is a library helping with geometrical types and objects to build user interfaces for VR web apps. React VR > React runtime > OVRUI > Three.js > WebVR and browser React VR project setup To make VR web apps as our React VR example first we have to do a short setup with tools provided by Oculus. To start, we install the React VR using NPM: CLI tool npm install -g react-vr-cli With it we create a new directory for web application and name it for our React VR app project: TMExample react-vr init TMExample This may take some time, so do not worry. Then we place into our directory: cd cd TMExample To check if it’s working, we test a local server with: npm start After all of this is done, open the following URL in your web browser: Clearly, give it few moments to initialize the application, and you should see the animated VR environment like this: . http://localhost:8081/vr Now you good to go with building your own web based virtual reality apps with React VR. Let’s explain how we built our simple VR tour app. Creating a VR tour for web The structure of our app’s directory is as follows: +-node_modules 
+-static_assets 
+-vr 
-.gitignore 
-.watchmanconfig 
-index.vr.js 
-package.json 
-postinstall.js 
-rn-cli-config.js The code of a web app would be in the file, while the directory hosts external resources (images, 3D models). In addition, you can learn more on how to get started with . index.vr.js static_assets React VR project VR components in use We use React Native packager for code pre-processing, compilation, bundling and asset loading. In render function there are . Each of these React VR components comes with a style attribute to help control the layout. view, pano and text components To wrap it up finally, check that the root component gets registered with It bundles the application and also readies it to run. Next step to highlight in our React VR app project is compiling 2 main files. AppRegistry.registerComponent. Index.vr.js file In constructor we’ve indicated the data for VR tour app. These are scene images, buttons to switch between scenes with X-Y-Z coordinates, values for animations. All the images we contain in folder. static_assets constructor (props) {
     super(props);
    this.state =  {
      scenes: [{scene_image: 'initial.jpg', step: 1, navigations: [{step:2, translate: [0.73,-0.15,0.66], rotation: [0,36,0] }] },
               {scene_image: 'step1.jpg', step: 2, navigations: [{step:3, translate: [-0.43,-0.01,0.9], rotation: [0,140,0] }]},
               {scene_image: 'step2.jpg', step: 3, navigations: [{step:4, translate: [-0.4,0.05,-0.9], rotation: [0,0,0] }]},
               {scene_image: 'step3.jpg', step: 4, navigations: [{step:5, translate: [-0.55,-0.03,-0.8], rotation: [0,32,0] }]},
               {scene_image: 'step4.jpg', step: 5, navigations: [{step:1, translate: [0.2,-0.03,-1], rotation: [0,20,0] }]}],
      current_scene:{},
      animationWidth: 0.05,
      animationRadius: 50
      };
} Then we’ve changed the output of images linking them to , previously indicated in constructor. state Navigational buttons In each scene we’ve placed transition buttons for navigation within a tour, taking data from . Subscribing to event to convey switching between scenes, binding to it as well. state onInput this onNavigationClick(item,e){
     if(e.nativeEvent.inputEvent.eventType === "mousedown" && e.nativeEvent.inputEvent.button === 0){
          var new_scene = this.state.scenes.find(i => i['step'] === item.step);
          this.setState({current_scene: new_scene});
          postMessage({ type: "sceneChanged"})
     }
}
sceneOnLoad(){
    postMessage({ type: "sceneLoadStart"})
  }

  sceneOnLoadEnd(){
    postMessage({ type: "sceneLoadEnd"})
  }
this.sceneOnLoad = this.sceneOnLoad.bind(this);
this.sceneOnLoadEnd = this.sceneOnLoadEnd.bind(this);
this.onNavigationClick = this.onNavigationClick.bind(this); Button animation Below, we’ll display the code for navigation button animations. We’ve built animations on button increase principle, applying conventional . requestAnimationFrame this.animatePointer = this.animatePointer.bind(this);
animatePointer(){
    var delta = this.state.animationWidth + 0.002;
    var radius = this.state.animationRadius + 10;
    if(delta >= 0.13){
        delta = 0.05;
        radius = 50;
    }
    this.setState({animationWidth: delta, animationRadius: radius})
    this.frameHandle = requestAnimationFrame(this.animatePointer);
}

componentDidMount(){
    this.animatePointer();
}

componentWillUnmount(){
    if (this.frameHandle) {
        cancelAnimationFrame(this.frameHandle);
        this.frameHandle = null;
    }
} In function we’ve indicated the current scene. Then we’ve also subscribed to event for data exchange with the main thread. We do it this way due to a need to work out a React VR component in a separate thread. componentWillMount message In function we only process one message with key. We’ll elaborate later why we do so. Similarly, we’ve subscribed to event to convey arrow turns. onMainWindowMessage newCoordinates onInput componentWillMount(){
     window.addEventListener('message', this.onMainWindowMessage);
     this.setState({current_scene: this.state.scenes[0]})
}
onMainWindowMessage(e){
     switch (e.data.type) {
          case 'newCoordinates':
               var scene_navigation = this.state.current_scene.navigations[0];
               this.state.current_scene.navigations[0]['translate'] = [e.data.coordinates.x,e.data.coordinates.y,e.data.coordinates.z]
               this.forceUpdate();
          break;
     default:
          return;
     }
}

rotatePointer(nativeEvent){
     switch (nativeEvent.keyCode) {
           case 38:
                 this.state.current_scene.navigations[0]['rotation'][1] += 4;
           break;
           case 39:
                 this.state.current_scene.navigations[0]['rotation'][0] += 4;
           break;
           case 40:
                 this.state.current_scene.navigations[0]['rotation'][2] += 4;
           break;
           default:
                 return;
     }
     this.forceUpdate();
} Arrow turns are done with ↑→↓ alt keys, for Y-X-Z axes respectively. Furthermore, see and download the whole file as part of our . index.vr.js React VR example Client.js file Moving further into our React VR example of virtual reality web applications, we’ve added the code below into function. The goal is processing of , and events, where the latter is in rendering thread for message exchanges. Also, we’ve kept a link to and objects. init ondblclick onmousewheel message vr vr.player._camera window.playerCamera = vr.player._camera;
window.vr = vr;
window.ondblclick= onRendererDoubleClick;
window.onmousewheel = onRendererMouseWheel;
vr.rootView.context.worker.addEventListener('message', onVRMessage); We’ve introduced the function for zoom returning to default when scenes change. Also, we have added the loader when scene change occurs. onVRMessage function onVRMessage(e) {
     switch (e.data.type) {
          case 'sceneChanged':
               if (window.playerCamera.zoom != 1) {
                    window.playerCamera.zoom = 1;
                    window.playerCamera.updateProjectionMatrix();
               }
          break;
          case 'sceneLoadStart':
             document.getElementById('loader').style.display = 'block';
          break;
          case 'sceneLoadEnd':
             document.getElementById('loader').style.display = 'none';
          break;
          default:
               return;
     }
} function for 3D-coordinates calculation and sending messages to vr component to change arrow coordinates. The get3DPoint function is custom to our web VR application and looks like this: onRendererDoubleClick function onRendererDoubleClick(){
    var x  = 2 * (event.x / window.innerWidth) - 1;
    var y = 1 - 2 * ( event.y / window.innerHeight );
    var coordinates = get3DPoint(window.playerCamera, x, y);
    vr.rootView.context.worker.postMessage({ type: "newCoordinates", coordinates: coordinates });
} Switch to mouse wheel We’ve used the function for switching zoom to a mouse wheel. onRendererMouseWheel function onRendererMouseWheel(){
     if (event.deltaY > 0 ){
          if(window.playerCamera.zoom  > 1) {
               window.playerCamera.zoom -= 0.1;
               window.playerCamera.updateProjectionMatrix();
          }
     }
     else {
          if(window.playerCamera.zoom < 3) {
               window.playerCamera.zoom += 0.1;
               window.playerCamera.updateProjectionMatrix();
          }
     }
} Exporting coordinates Then we’ve utilized to work with 3D-graphics. In this file we’ve rather conveyed one function to export screen coordinated to world coordinates. Three.js import * as THREE from 'three';
export function get3DPoint(camera,x,y){
    var mousePosition = new THREE.Vector3(x, y, 0.5);
    mousePosition.unproject(camera);
    var dir = mousePosition.sub(camera.position).normalize();
    return dir;
} Check and download the whole file on . There’s probably no need to explain how the file works, as it is plain simple, and you can download it as our as well. client.js Github demo cameraHelper.js ReactVR demo And this is it, this is how we’ve created our short VR tour using React VR framework. The source code of this whole project is available for download at our demo . React VR GitHub Also, bear in mind, that this was the demonstration of general possibilities of React VR. It has already made VR web apps possible thanks to Facebook efforts, and with official full release of React VR there will be more. The cost of making a React VR app Obviously, calculating the cost to make web-based virtual reality applications using React VR can not be precise. It totally depends on the skill-level of chosen . It is a grey(ish) area at this point in time. This React VR framework by Oculus is still pending for official release and is expected to be enhanced considerably yet. And yet, as we’ve shown in our VR tour demo, making VR web apps is already possible. ReactJS developers And we’ve only used official free samples from React VR library. To build your own project you would have to install a local server and CMS, as well as create 360-degree images and three-dimensional objects. The cost estimate for such here at we imply a hourly rate. VR web app ThinkMobiles $40 In conclusion Note, that cost of any custom React VR app for web would depend on the amount of 3D-imagery and backend buildup. On our side, 1 developer was engaged in this task. And yet, it took about one week to create this VR tour from zero. The principal challenge of our React VR app was data exchange between the main and virtual reality component thread. We’ve actually put together 5 locations to view and switch between for this short web VR tour. Finally, you can view our in full, and read more of our related articles about: VR tour Hire VR/AR developers VR app development How much does it cost to make an app? Thank you for reading. If you like it leave some 👏. Originally published at thinkmobiles.com

How much does it cost to create sample React VR app?

Redis Pub/Sub messaging paradigm allows applications talk to each other through subscription to channels. Subscribers declare their interest in specific channels and Redis pushes messages to all subscribed clients without knowledge of what (if any) subscribers there may be. You can read more about Publish/Subscribe pattern on . wikipedia In our case, replicas of our application runs on different machines as a docker swarm service and we need them to talk to each other. We are handling users who are connected to our system through websocket connections. Those connections are handled by replicas of our application running on different machines or instances. many We will use , (Redis client) and for unique ID creation. The simple application we are going to demonstrate will forward JSON messages between clients. Note that, this is a simpler version of what we run on production. For the sake of simplicity and readability, I will skip possible improvements. Gorilla Websocket Redigo UUID We start by declaring a user struct and a store to keep track of connected users. type User struct {ID   stringconn *websocket.Conn} type Store struct {Users []*Usersync.Mutex} In case you have noticed, as our application will run a http server, we are protecting our store with Mutex. Next we define the message we are going to exchange between users. type Message struct {DeliveryID string `json:"id"`Content    string `json:"content"`} It might be better to use a Pool connection for Redis communication but we will skip it for simplicity and initialize app as follows. var (gStore      *StoregPubSubConn *redis.PubSubConngRedisConn  = func() (redis.Conn, error) {return redis.Dial("tcp", ":6379")}) func init() {gStore = &Store{Users: make([]*User, 0, 1),}} At this point, we can declare a function to create a new user and subscribe to Redis Pub/Sub channel by its unique id. func (s *Store) newUser(conn *websocket.Conn) *User {u := &User{ID:   uuid.NewV4().String(),conn: conn,} if err := gPubSubConn.Subscribe(u.ID); err != nil {  
    panic(err)  
}  
s.Lock()  
defer s.Unlock()

s.Users = append(s.Users, u)  
return u } Normally we do not want to panic on pub/sub connection error. You can redial Redis or borrow another connection from the pool on error. So, I do leave it as an improvement point here. ( An example unique ID that we assign here is ce6df22e-b497–4a71–81c5–2da31a5566e8.) Now we have reached the point where we will listen to published messages and deliver them to the users. func deliverMessages() {for {switch v := gPubSubConn.Receive().(type) {case redis.Message:gStore.findAndDeliver(v.Channel, string(v.Data)) case redis.Subscription:  
        log.Printf("subscription message: %s: %s %d\\n", v.Channel, v.Kind, v.Count)  
      
    case error:  
        log.Println("error pub/sub, delivery has stopped")  
        return   
    }  
} } func (s *Store) findAndDeliver(userID string, content string) {m := Message{Content: content,} for \_, u := range s.Users {  
    if u.ID == userID {  
        if err := u.conn.WriteJSON(m); err != nil {  
            log.Printf("error on message delivery e: %s\\n", err)  
        } else {  
            log.Printf("user %s found, message sent\\n", userID)  
        }  
        return  
    }  
}

log.Printf("user %s not found at our store\\n", userID) } We will be calling deliverMessages function from another goroutine not to block our application. Now its time to declare our main function. var serverAddress = ":8080" func main() {gRedisConn, err := gRedisConn()if err != nil {panic(err)}defer gRedisConn.Close() gPubSubConn = &redis.PubSubConn{Conn: gRedisConn}  
defer gPubSubConn.Close()

go deliverMessages()

http.HandleFunc("/ws", wsHandler)  
log.Printf("server started at %s\\n", serverAddress)  
  
log.Fatal(http.ListenAndServe(serverAddress, nil)) } And our handler. var upgrader = websocket.Upgrader{CheckOrigin: func(r *http.Request) bool {return true},} func wsHandler(w http.ResponseWriter, r *http.Request) {conn, err := upgrader.Upgrade(w, r, nil)if err != nil {log.Printf("upgrader error %s\n" + err.Error())return}u := gStore.newUser(conn)log.Printf("user %s joined\n", u.ID) for {  
    var m Message

    if err := u.conn.ReadJSON(&m); err != nil {  
        log.Printf("error on ws. message %s\\n", err)  
    }

    if c, err := gRedisConn(); err != nil {  
        log.Printf("error on redis conn. %s\\n", err)  
    } else {  
        c.Do("PUBLISH", m.DeliveryID, string(m.Content))  
    }  
} } WebSockets can perform cross domain communication and they are not limited by the SOP (Same Origin Policy). The default upgrader checks the Origin field of the incoming request with the Host header value to confirm they are equal before allowing the request. If you want to use the default CheckOrigin function you need to ensure that your client includes the Origin header with its request. Again for easier demonstration, we are overriding the function but you should not do it for safety purposes. This is whole you need basically. You can check the . code sniplet here If you have reached this point, let’s try it. I started my server and opened Chrome Developer Tools. Executing commands in the console as follows. > var con0 = new WebSocket('ws://localhost:8080/ws')> undefined> var con1 = new WebSocket('ws://localhost:8080/ws')> undefined Our server logs those connections as, 2017/01/21 17:26:46 server started at :8080 2017/01/21 17:28:24 user 7c27943d-dd98-4bfe-829f-7bd9834f9f63 joined 2017/01/21 17:28:24 subscription message: 7c27943d-dd98-4bfe-829f-7bd9834f9f63: subscribe 1 2017/01/21 17:28:28 user ffbe9040-b424-4bdc-89a9-f8b045c878c6 joined 2017/01/21 17:28:28 subscription message: ffbe9040-b424-4bdc-89a9-f8b045c878c6: subscribe 2 As you can see, our first and second websocket connections created two users: User 1 ID: 7c27943d-dd98–4bfe-829f-7bd9834f9f63 User 2 ID: ffbe9040-b424–4bdc-89a9-f8b045c878c6 Lets send message to User 1 (represented by first websocket connection) from User 2. > con0.onmessage = function(e) { console.log("connection 0 received message", e.data) } > var mes = new Object()> mes.id = "7c27943d-dd98–4bfe-829f-7bd9834f9f63"> mes.content = "hello" > con1.send(JSON.stringify(mes)) > VM154:1 connection 0 received message {"id":"","content":"hello"} and our server logs, 2017/01/21 17:32:58 user 7c27943d-dd98-4bfe-829f-7bd9834f9f63 found at our store, message sent Conclusion The good side of this implementation is, if you are running your application in a distributed/clustered manner, you can scale it with ease. If you are using Docker Swarm (like us), Kubernetes or a similar clustering service scaling is easy and this pattern works well in a situation like ours. You should handle websocket connection closings (browser closed, etc.) and Redis connections. This is just a demo script. Note

Stories, News & Mentions about E6DATA

E6data’s Stories on HackerNoon