Lanre Adelowo

In this tutorial, we will explore how Pusher Channels can be used to share your terminal as a web page. If you want to play around with the code as you read this tutorial, visit this [GitHub repository](https://github.com/adelowo/pusher-channel-terminal-web-sync), which contains the final version of the code for you to check out and run locally. 

A feature such as this is already available in CI servers, you already monitor in realtime the output of your build. It can also help in situations where you want a colleague to help troubleshoot an issue and don’t necessarily want to send log files back and forth, the colleague can take a look at your terminal directly instead.


## Prerequisites


- Golang (`>=1.9`) .  A working knowledge of Go is required to follow this tutorial.
- A Pusher Channels application. [Create one here.](https://pusher.com/channels)
- Git Bash if you are on Windows.


## Building the program

An important aspect to this is implementing a Golang program that can act as a [Pipe](https://en.wikipedia.org/wiki/Pipeline_(Unix)). So in short, we will be building a program that monitors the output of another program then displays it on the web UI we are going to build.

An example usage is:

```
    $ ./script | go run main.go
``` 

Here is an example of what we will be building:

![go-terminal-share-demo](//images.ctfassets.net/1es3ne0caaid/2Ntoh7NkwaEuwBpdXqRsHT/eea0c0367a7eab2fbea7c6b90e0443cd/go-terminal-share-demo.gif)

The next step of action is to build the Golang program that will be used as pipe. To get started, we need to create a Pusher Channels application, that can be done by visiting the [dashboard](https://dashboard.pusher.com). You will need to click on the **Create new app** button to get started:

![go-terminal-share-pusher](//images.ctfassets.net/1es3ne0caaid/klMqgWDvYb4hYJwBCku03/3a4b0efbc79c39de1115e2a000750269/go-terminal-share-pusher.png)

You will then be redirected to a control panel for your app where you’d be able to view the information about the app and more importantly, the authorization keys you need to connect to the application.

Once the above has been done, we will then proceed to create the actual Golang program. To do a little recap again, this program will perform two tasks:


- Act as a pipe for another program
- Start an `HTTP` server that displays the output of another program (the one being piped) in realtime.

The first thing to do is to create a new directory in your `$GOPATH` called `pusher-channel-terminal-web-sync`. That can be done with the following command:


```
    $ mkdir $GOPATH/github.com/pusher-tutorials/pusher-channel-terminal-web-sync
``` 

You will need to create an `.env` file with the following contents:

```
    // pusher-channel-terminal-web-sync/.env
    PUSHER_APP_ID="PUSHER_APP_ID"
    PUSHER_APP_KEY="PUSHER_APP_KEY"
    PUSHER_APP_SECRET="PUSHER_APP_SECRET"
    PUSHER_APP_CLUSTER="PUSHER_APP_CLUSTER"
    PUSHER_APP_SECURE="1"
``` 


> Please remember to replace the placeholders with the original values. They can be gotten from the control panel.


The next step of action is to create a `main.go` file. This will house the actual code for connecting and publishing events to Pusher Channels so as to be able to show those in real time on the web.

You can create a `main.go` file with the following command:


```   
    $ touch main.go
```   

Once the file has been created, the next step is to fetch some required dependency such as Pusher’s client SDK. To do that, you will need to run the command below:


```   
    $ go get github.com/joho/godotenv
    $ go get github.com/pusher/pusher-http-go
``` 


Once the above commands succeed, you will need to paste the following content into it:

```go
    // pusher-channel-terminal-web-sync/main.go
    package main
    
    import (
            "bufio"
            "bytes"
            "flag"
            "fmt"
            "io"
            "log"
            "net/http"
            "os"
            "sync"
            "text/template"
            "time"
    
            "github.com/joho/godotenv"
            pusher "github.com/pusher/pusher-http-go"
    )
    
    const (
            channelName = "realtime-terminal"
            eventName   = "logs"
    )
    
    func main() {
    
            var httpPort = flag.Int("http.port", 1500, "Port to run HTTP server on ?")
    
            flag.Parse()
    
            info, err := os.Stdin.Stat()
            if err != nil {
                    log.Fatal(err)
            }
    
            if info.Mode()&os.ModeCharDevice != 0 {
                    log.Println("This command is intended to be used as a pipe such as yourprogram | thisprogram")
                    os.Exit(0)
            }
    
            if err := godotenv.Load(); err != nil {
                    log.Fatal("Error loading .env file")
            }
    
            appID := os.Getenv("PUSHER_APP_ID")
            appKey := os.Getenv("PUSHER_APP_KEY")
            appSecret := os.Getenv("PUSHER_APP_SECRET")
            appCluster := os.Getenv("PUSHER_APP_CLUSTER")
            appIsSecure := os.Getenv("PUSHER_APP_SECURE")
    
            var isSecure bool
            if appIsSecure == "1" {
                    isSecure = true
            }
    
            client := &pusher.Client{
                    AppId:   appID,
                    Key:     appKey,
                    Secret:  appSecret,
                    Cluster: appCluster,
                    Secure:  isSecure,
                    HttpClient: &http.Client{
                            Timeout: time.Minute * 2,
                    },
            }
    
            go func() {
                    var t *template.Template
                    var once sync.Once
    
                    http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("."))))
    
                    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
    
                            once.Do(func() {
                                    tem, err := template.ParseFiles("index.html")
                                    if err != nil {
                                            log.Fatal(err)
                                    }
    
                                    t = tem.Lookup("index.html")
                            })
    
                            t.Execute(w, nil)
                    })
                    log.Fatal(http.ListenAndServe(fmt.Sprintf(":%d", *httpPort), nil))
            }()
    
            reader := bufio.NewReader(os.Stdin)
    
            var writer io.Writer
            writer = pusherChannelWriter{client: client}
    
            for {
                    in, _, err := reader.ReadLine()
                    if err != nil && err == io.EOF {
                            break
                    }
    
                    in = append(in, []byte("\n")...)
                    if _, err := writer.Write(in); err != nil {
                            log.Fatalln(err)
                    }
            }
    }
    
    type pusherChannelWriter struct {
            client *pusher.Client
    }
    
    func (pusher pusherChannelWriter) Write(p []byte) (int, error) {
            s := string(p)
            dd := bytes.Split(p, []byte("\n"))
    
            var data = make([]string, 0, len(dd))
    
            for _, v := range dd {
                    data = append(data, string(v))
            }
    
            _, err := pusher.client.Trigger(channelName, eventName, s)
            return len(p), err
    }
```

While the above code is a bit lengthy, I’d break it down. 

- Line 35 - 38 is probably the most interesting part. We make sure the program can only be run if it is acting as a pipe to another program. An example is   `someprogram | ourprogram`.
- Line 66 - 88 is where we start the `HTTP` server. The server will load up an `index.html` file where the contents of the program we are acting as a pipe for will  be seen in realtime. Maybe another interesting thing is  `var once sync.Once`. What `sync.Once` offers us is the ability to perform a task just once throughout the lifetime of a program, with this we load the contents of `index.html` just once and don’t have to repeat it every time the web page is requested.
- Line 109 - 125 is where we actually send output to Pusher Channels.

Great, something we have missed so far is the `index.html` file. You will need to go ahead to create that in the root directory with the following command:

```    
    $ touch index.html
```    

Open the newly created file and paste in the following contents:

```html
    // pusher-channel-terminal-web-sync/index.html
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Pusher realtime terminal sync</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" type="image/x-icon" href="favicon.ico" />
        <link href="static/app.css" rel="stylesheet">
      <body>
      <div id="terminal">
              <pre>
                <output id="logs"></output>
              </pre>
      </div>
      </body>
      <script src="https://js.pusher.com/4.3/pusher.min.js"></script>
      <script src="static/app.js"></script>
    </html>
```    

As you may have noticed, we referenced `app.js`  and `app.css` file. We will get started with the `app.js` file , that can be done with the following command:


```    
    $ touch app.js
```    

Once done, you will need to paste the following contents into it.:

```javascript
    // pusher-channel-terminal-web-sync/app.js
    (function() {
      const APP_KEY = 'PUSHER_APP_KEY';
      const APP_CLUSTER = 'PUSHER_APP_CLUSTER';
    
      const logsDiv = document.getElementById('logs');
    
      const pusher = new Pusher(APP_KEY, {
        cluster: APP_CLUSTER,
      });
    
      const channel = pusher.subscribe('realtime-terminal');
    
      channel.bind('logs', data => {
        const divElement = document.createElement('div');
        divElement.innerHTML = data;
    
        logsDiv.appendChild(divElement);
      });
    })();
```    


> Do make sure to replace `PUSHER_APP_KEY` and `PUSHER_APP_CLUSTER` with your original credentials

You also need to create the `app.css` file. That can be done with:

```
    $ touch app.css 
```

Once done, paste the following contents into it:

```css
    // pusher-channel-terminal-web-sync/app.css
    #terminal {
            font-family: courier, monospace;
            color: #fff;
            width:750px;
            margin-left:auto;
            margin-right:auto;
            margin-top:100px;
            font-size:14px;
    }
    
    body {
            background-color: #000
    }
```    

Nothing too fancy right? We just make the website’s background black and try to mimic a real terminal.

All is set and we can go ahead to test our program. A major key to testing this is an application that writes to standard output, such programs like `cat` or a running NodeJS program that writes log to standard output. 

To make this as simple as can be, we will make use of another Go program that writes a UUID to standard output every second. This file can be created with:


```
    # This should be done within the pusher-channel-terminal-web-sync directory
    $ mkdir uuid
    $ touch uuid/uuid.go
```    

Since we will be generating UUIDs, we will require a dependency for that. You can install that by running:


```    
    $ go get github.com/google/uuid
```    

In the newly created `uuid.go`, paste the following contents into it:

```go
    // pusher-channel-terminal-web-sync/uuid/uuid.go
    package main
    
    import (
            "fmt"
            "time"
    
            "github.com/google/uuid"
    )
    
    func main() {
    
            for {
                    time.Sleep(time.Millisecond * 500)
                    fmt.Printf("Generating a new UUID -- %s", uuid.New())
                    fmt.Println()
            }
    }
```    


All is set right now for us to test. To do this, we will need to build both the UUID generator and our actual program.

```
    # Linux and Mac
    $ go build -o uuidgenerator uuid/uuid.go
    $ go build
    
    # Windows
    $ go build -o uuidgenerator.exe uuid/uuid.go
    $ go build
```

Once the above has been done, we will then run both of them. That can be done by running the command below:


```    
    $ ./uuidgenerator | ./pusher-channel-terminal-web-sync
```    


There should be no output in the terminal but you should visit http://localhost:1500 in other to view the output of the UUID generator in real time. You should be presented with something as depicted in the gif below:

![go-terminal-share-demo](//images.ctfassets.net/1es3ne0caaid/2Ntoh7NkwaEuwBpdXqRsHT/eea0c0367a7eab2fbea7c6b90e0443cd/go-terminal-share-demo.gif)

## Conclusion

In this tutorial, I have described how [Pusher Channels](https://pusher.com/channels) can be leveraged to build a realtime view of your terminal. This can be really useful if you want to share your terminal with someone else on the same network as you are or with a tool such as ngrok. You could do something like `ngrok http 1500` and share the link with someone else. 

As always, you can find the code on [GitHub](https://github.com/adelowo/pusher-channel-terminal-web-sync).

Learn how to share your terminal output in a web interface using Go. The demo pipes data to the app, which renders it to the browser rather than the standard output. This could form the basis of a collaborative work tool or monitoring tool.

Share your terminal as a web application with Go

Channels

Wern Ancheta

In this two-part series, build a whiteboard app using Node, Electron and React. Users will be able to collaborate in realtime, drawing on a simple canvas. The app also features chat functionality. In part one, create the whiteboard.

Create a whiteboard Electron app with React - Part 1

Create a whiteboard Electron app with React - Part 1: Adding the whiteboard

Ayooluwa Isaiah

In this tutorial, we’ll go through how to build a code editor with React, while syncing the changes made in realtime across all connected clients with Pusher Channels. You can find the entire source code for the application in this [GitHub repository](https://github.com/ayoisaiah/pusher-code-playground).

## Prerequisites

You need to have experience with building [React](https://reactjs.org/) and [Node.js](https://nodejs.org/en/download/) applications to follow through with this tutorial. You also need to have Node.js (version 6 or later) and npm installed on your machine. Installation instructions for Node.js can be found on [this page](https://www.npmjs.com/get-npm).

## Set up the server

Create a new directory for this project on your machine and `cd` into it:

```
    mkdir code-playground
    cd code-playground
```

Next, initialize a new Node project by running the command below. The `-y` flag allows us to accept all the defaults without being prompted.

```
    npm init -y
```

Next, install the dependencies we’ll be using to set up the Node server:

```
    npm install express body-parser dotenv cors pusher --save
```

Once the dependencies have been installed, create a new `server.js` file in the root of your project directory and paste in the following code:

``` javascript
    // server.js
    
    require('dotenv').config({ path: '.env' });
    
    const express = require('express');
    const bodyParser = require('body-parser');
    const cors = require('cors');
    const Pusher = require('pusher');
    
    const app = express();
    
    app.use(cors())
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(bodyParser.json());
    
    app.set('port', process.env.PORT || 5000);
    const server = app.listen(app.get('port'), () => {
      console.log(`Express running → PORT ${server.address().port}`);
    });
```

Save the file and create a `.env` file in the root of your project directory. Change its contents to look like this:

```
    // .env
    
    PORT=5000
```

## Set up Channels integration

Head over to the Pusher website and [sign up for a free account](https://dashboard.pusher.com/accounts/sign_up). Select **Channels apps** on the sidebar, and hit **Create Channels app** to create a new app. Once your app is created, retrieve your credentials from the API Keys tab, then add the following to the `.env` file:

```
    // .env
    
    PORT=5000
    PUSHER_APP_ID=<your app id>
    PUSHER_APP_KEY=<your app key>
    PUSHER_APP_SECRET=<your app secret>
    PUSHER_APP_CLUSTER=<your app cluster>
```

Next, initialize the Pusher SDK within `server.js`:

``` javascript
    require('dotenv').config({ path: '.env' });
    
    const express = require('express');
    const bodyParser = require('body-parser');
    const cors = require('cors');
    const Pusher = require('pusher');
    
    const app = express();
    
    const pusher = new Pusher({
      appId: process.env.PUSHER_APP_ID,
      key: process.env.PUSHER_APP_KEY,
      secret: process.env.PUSHER_APP_SECRET,
      cluster: process.env.PUSHER_APP_CLUSTER,
      useTLS: true,
    });
    
    app.use(cors())
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(bodyParser.json());
    
    app.set('port', process.env.PORT || 5000);
    const server = app.listen(app.get('port'), () => {
      console.log(`Express running → PORT ${server.address().port}`);
    });
```

## Set up the React application

Make sure you have the [create-react-app](https://github.com/facebook/create-react-app) package installed globally on your machine. Otherwise, run, `npm install -g create-react-app`.

Next, run the following command to bootstrap your React app:

```
    create-react-app client
```

Once the command above has finished running, `cd` into the newly created `client` directory and install the other dependencies which we’ll be needing for our app’s frontend:

```
    npm install pusher-js axios pushid react-codemirror2 codemirror --save
```

Now, you can run `npm start` from within the `client` directory to start the development server and navigate to http://localhost:3000 in your browser.

## Add the styles for the app

Before we tackle the application logic, let’s add all the styles we need to create the code playground. Within the `client` directory, locate `src/App.css` and change its contents to look like this:

``` css
    // client/src/App.css
    
    html {
      box-sizing: border-box;
    }
    
    *, *::before, *::after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
    }
    
    .playground {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      width: 600px;
      background-color: #1E1E2C;
    }
    
    .code-editor {
      height: 33.33%;
      overflow: hidden;
      position: relative;
    }
    
    .editor-header {
      height: 30px;
      content: attr(title);
      display: flex;
      align-items: center;
      padding-left: 20px;
      font-size: 18px;
      color: #fafafa;
    }
    
    .react-codemirror2 {
      max-height: calc(100% - 30px);
      overflow: auto;
    }
    
    .result {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 600px;
      overflow: hidden;
    }
    
    .iframe {
      width: 100%;
      height: 100%;
    }
```

## Render the code playground

Open up `client/src/App.js` and change it to look like this:

``` javascript
    // client/src/App.js
    
    import React, { Component } from 'react';
    import { Controlled as CodeMirror } from 'react-codemirror2';
    import Pusher from 'pusher-js';
    import pushid from 'pushid';
    import axios from 'axios';
    
    import './App.css';
    import 'codemirror/lib/codemirror.css';
    import 'codemirror/theme/material.css';
    
    import 'codemirror/mode/htmlmixed/htmlmixed';
    import 'codemirror/mode/css/css';
    import 'codemirror/mode/javascript/javascript';
    
    class App extends Component {
      constructor() {
        super();
        this.state = {
          id: '',
          html: '',
          css: '',
          js: '',
        };
      }
    
      componentDidUpdate() {
        this.runCode();
      }
    
      componentDidMount() {
        this.setState({
          id: pushid(),
        });
      }
    
      runCode = () => {
        const { html, css, js } = this.state;
    
        const iframe = this.refs.iframe;
        const document = iframe.contentDocument;
        const documentContents = `
          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
            <style>
              ${css}
            </style>
          </head>
          <body>
            ${html}
    
            <script type="text/javascript">
              ${js}
            </script>
          </body>
          </html>
        `;
    
        document.open();
        document.write(documentContents);
        document.close();
      };
    
      render() {
        const { html, js, css } = this.state;
        const codeMirrorOptions = {
          theme: 'material',
          lineNumbers: true,
          scrollbarStyle: null,
          lineWrapping: true,
        };
    
        return (
          <div className="App">
            <section className="playground">
              <div className="code-editor html-code">
                <div className="editor-header">HTML</div>
                <CodeMirror
                  value={html}
                  options={{
                    mode: 'htmlmixed',
                    ...codeMirrorOptions,
                  }}
                  onBeforeChange={(editor, data, html) => {
                    this.setState({ html });
                  }}
                />
              </div>
              <div className="code-editor css-code">
                <div className="editor-header">CSS</div>
                <CodeMirror
                  value={css}
                  options={{
                    mode: 'css',
                    ...codeMirrorOptions,
                  }}
                  onBeforeChange={(editor, data, css) => {
                    this.setState({ css });
                  }}
                />
              </div>
              <div className="code-editor js-code">
                <div className="editor-header">JavaScript</div>
                <CodeMirror
                  value={js}
                  options={{
                    mode: 'javascript',
                    ...codeMirrorOptions,
                  }}
                  onBeforeChange={(editor, data, js) => {
                    this.setState({ js });
                  }}
                />
              </div>
            </section>
            <section className="result">
              <iframe title="result" className="iframe" ref="iframe" />
            </section>
          </div>
        );
      }
    }
    
    export default App;
```

We’re making use of [react-codemirror2](https://www.npmjs.com/package/react-codemirror2), a thin wrapper around the `codemirror` package for our code editor. We have three instances here, one for HTML, another for CSS and the last one for JavaScript.

Once the code in any one of the editors is updated, the `runCode()` function is triggered and the code is executed and rendered in an iframe.

![react-code-playground-demo-1](//images.ctfassets.net/1es3ne0caaid/5H9lLeFt1l3uVtLLtKNM38/27a73849ba7cd4ab2b4336733a8e7c7d/react-code-playground-demo-1.gif)

## Sync updates in realtime with Pusher

Let’s make it possible for multiple collaborators to edit and preview the code at the same time. We can do this pretty easily with Channels.

First, return to the `server.js` file you created earlier and add the following code into it :

``` javascript
    // server.js
    
    //beginning of the file
    app.use(bodyParser.json());
    
    app.post('/update-editor', (req, res) => {
      pusher.trigger('editor', 'code-update', {
       ...req.body,
      });
    
      res.status(200).send('OK');
    });
    
    // rest of the file
```

We’ll make a `POST` request to this route from the application frontend and pass in the contents of each of the code editors in the request body. We then trigger a `code-update` event on the `editor` channel each time a request is make to this route.

For this to work, we need to subscribe to the `editor` channel and listen for the `code-update` event on the frontend.

Let’s do just that in `App.js`:

``` javascript
    // client/src/App.js
    
    // beginning of the file
    
    class App extends Component {
      constructor() {
        super();
        this.state = {
          id: "",
          html: "",
          css: "",
          js: ""
        };
    
        this.pusher = new Pusher("<your app key>", {
          cluster: "<your app cluster>",
          forceTLS: true
        });
    
        this.channel = this.pusher.subscribe("editor");
      }
    
      componentDidUpdate() {
        this.runCode();
      }
    
      componentDidMount() {
        this.setState({
          id: pushid()
        });
        
        this.channel.bind("code-update", data => {
          const { id } = this.state;
          if (data.id === id) return;
    
          this.setState({
            html: data.html,
            css: data.css,
            js: data.js,
          });
        });
      }
    
      syncUpdates = () => {
        const data = { ...this.state };
    
        axios
          .post("http://localhost:5000/update-editor", data)
          .catch(console.error);
      };
      
      // rest of the file
    }
    
    export default App;
```

Then update the render function as follows:

``` javascript
    // client/src/App.js
    
      render() {
        const { html, js, css } = this.state;
        const codeMirrorOptions = {
          theme: "material",
          lineNumbers: true,
          scrollbarStyle: null,
          lineWrapping: true
        };
    
        return (
          <div className="App">
            <section className="playground">
              <div className="code-editor html-code">
                <div className="editor-header">HTML</div>
                <CodeMirror
                  value={html}
                  options={{
                    mode: "htmlmixed",
                    ...codeMirrorOptions
                  }}
                  onBeforeChange={(editor, data, html) => {
                    this.setState({ html }, () => this.syncUpdates()); // update this line
                  }}
                />
              </div>
              <div className="code-editor css-code">
                <div className="editor-header">CSS</div>
                <CodeMirror
                  value={css}
                  options={{
                    mode: "css",
                    ...codeMirrorOptions
                  }}
                  onBeforeChange={(editor, data, css) => {
                    this.setState({ css }, () => this.syncUpdates()); // update this line
                  }}
                />
              </div>
              <div className="code-editor js-code">
                <div className="editor-header">JavaScript</div>
                <CodeMirror
                  value={js}
                  options={{
                    mode: "javascript",
                    ...codeMirrorOptions
                  }}
                  onBeforeChange={(editor, data, js) => {
                    this.setState({ js }, () => this.syncUpdates()); // update this line
                  }}
                />
              </div>
            </section>
            <section className="result">
              <iframe title="result" className="iframe" ref="iframe" />
            </section>
          </div>
        );
      }
```

In the class constructor, we initialized the Pusher client library and subscribed to the `editor` channel. In the `syncUpdates()` method, we’re making a request to the `/update-editor` route that was created earlier. This method is triggered each time a change is made in any of the code editors.

Finally, we’re listening for the `code-update` event in `componentDidMount()` and updating the application state once the event is triggered. This allows code changes to be synced across all connected clients in realtime.

Before you test the app, make sure to kill the server with `Ctrl-C`  (if you have it running), and start it again with `node server.js` so that the latest changes are applied.

![react-code-playground-demo-2](//images.ctfassets.net/1es3ne0caaid/1znCSUXkuSn6kYVjg5Wi2l/e25c8d2360008fb1808177d7e8bff1c0/react-code-playground-demo-2.gif)

## Wrap up

You have now learned how easy it is to create a code playground with realtime collaboration features with Pusher Channels. 

Thanks for reading! Remember that you can find the source code of this app in this [GitHub repository](https://github.com/ayoisaiah/pusher-code-playground).

In this tutorial you will create a collaborative web coding playground, using a simple Node server, and React for the frontend. Users will be able to code together, seeing each others' contributions update in realtime.

How to build a live code playground with React

Christian Nwamba

## Introduction

As developers, we sometimes love to conveniently create easy-to-read documentation so as to ease the stress that accompanies styling at the beginning. For this, you need an easy tool such as the Markdown editor. This enables you to create a H1 ( for example) by simply adding a # before the header.

Together in this tutorial we'll build a simple, yet very effective realtime markdown editor application with [Vue](https://vuejs.org/) and powered by [Pusher](https://pusher.com/). This app will be used to convert raw markdown into proper HTML. It will have two separate sections:


1. To the left, where you write and view raw markdown
2. And the right, where you can easily view the converted markdown

A quick look at what we’ll build:

![vue-markdown-editor-demo-1](//images.ctfassets.net/1es3ne0caaid/5gtaWqftpSUgckQYGK2WwK/38f4847101722a7bf74472a3cba9ed5c/vue-markdown-editor-demo-1.gif)

## Prerequisites

Ensure that you have [Node.js](https://nodejs.org/en/) and [npm](https://www.npmjs.com/) installed on your machine. A quick overview of other core technologies we will be using in this tutorial include:


- [Vue](https://vuejs.org/): a progressive JavaScript framework for building applications


- [Pusher](https://pusher.com/): a Node.js client to interact with the Pusher REST API


- [Marked](https://github.com/markedjs/marked): a low-level markdown compiler for parsing markdown without caching or blocking for long periods of time.



> 💡 I am using @vue/cli 2.0 ****for this project


## Setting up the project

We’ll use [Vue-cli](https://cli.vuejs.org/) to setup our project, so run the command below to have it installed globally on your machine:

```
    npm install -g @vue/cli 
    or 
    yarn global add @vue/cli
```

You can verify that Vue is properly installed by running:

```
    vue --version
```

This will output the current version installed on your machine, just like this:

![vue-markdown-editor-vue-version](//images.ctfassets.net/1es3ne0caaid/5g3IpRIYH6qS0ogyOOkOK2/cd53e2e419dee38d2767c388b577d1dd/vue-markdown-editor-vue-version.png)

Now to generate our project, type the following command:

```
    vue init webpack vue-markdown // version 2
    or 
    vue create vue-markdown // version 3
```

Executing the command above will bring up a couple of questions, you can accept the default and proceed. Once the installation process is completed, you will now have a new project named `vue-markdown` installed in your project directory.


## Running the application

Next, we’ll run the application:

```
    npm start // version 2
    or
    npm run serve // version 3
```

This will start the application on the http://localhost:8080. Visit that link:

![vue-markdown-editor-homepage](//images.ctfassets.net/1es3ne0caaid/4NbOhe4KrCgoYSy8QeMS2s/9b027f4b7620ebe161ce3bd02cfc6576/vue-markdown-editor-homepage.png)

## Installing server dependencies

Run the following commands to install the dependencies required for this project:

```
    npm install --save pusher pusher-js marked
    npm install --save body-parser cors dotenv express 
```

## Pusher account setup

Head over to Pusher and [sign up for a free account](https://dashboard.pusher.com/accounts/sign_up), if you don’t already have one. Log in to create a new application by clicking on the **Channels apps** on the sidebar. Obtain your application credentials as we will need to use them later in this post.

### A little more about how Pusher works

Pusher allows you communicate between different parts of your application in realtime. It can be a notification you wish to show your users or the price of a product which people are bidding on currently. Whatever it is that needs constant updating, you can (and maybe should) use pusher for it.

By default, Pusher allows you bind to events on the client-side (listen to events on your browser, app, etc) and then trigger events on the server-side (send broadcasts to all listeners from the server). However, pusher has this really cool super amazing feature called private channels that allows you trigger events from the client side. You have to turn it on and perform a few actions to use it.


1. Your channel name on the client-side must be prefixed with `private-`
2. All your event names on the client-side must be prefixed with `client-`
3. You must authenticate the Pusher subscription before you can trigger events on the client-side.

So, from your Pusher app dashboard, go to App settings and enable client events before you continue with this guide.

![vue-markdown-editor-enable-client-events](//images.ctfassets.net/1es3ne0caaid/3F3daML5u8mwecqeiU0sqi/1a98bd74511c44cc63bebb8c26f92c7a/vue-markdown-editor-enable-client-events.png)

Now you are ready. You can read more about [private channels](https://pusher.com/docs/client_api_guide/client_events#trigger-events).

## Environment variables

Create a file name `.env` in the root directory of your application and add your application credentials as obtained from your Pusher dashboard as follows:


```
    PUSHER_APP_ID=YOUR_APP_ID
    PUSHER_APP_KEY=YOUR_APP_KEY
    PUSHER_APP_SECRET=YOUR_APP_SECRET
    PUSHER_APP_CLUSTER=CLUSTER
```

Ensure that you replace `YOUR_APP_ID`, `YOUR_APP_KEY`, `YOUR_APP_SECRET` and `CLUSTER` placeholders with the appropriate credentials.


## Setting up the server

The main objective of this application is to be able to process and convert a raw markdown to HTML in realtime from all browsers, to effectively achieve this, we’ll use Express to set up a simple server and use Pusher to broadcast the converted markdown to all the client on a specific channel. 

So create a `server.js` file in the root directory of your application and add the following code snippet to it:

``` javascript
    // server.js
    
      const express = require('express');
      const bodyParser = require('body-parser');
      const cors = require('cors');
      const Pusher = require('pusher');
      require('dotenv').config();
      
      const app = express();
      
      app.use(cors());
      app.use(bodyParser.urlencoded({ extended: false }));
      app.use(bodyParser.json());
      
      const pusher = new Pusher({
          appId: process.env.PUSHER_APP_ID,
          key: process.env.PUSHER_APP_KEY,
          secret: process.env.PUSHER_APP_SECRET,
          cluster: process.env.PUSHER_APP_CLUSTER,
          encrypted: true
      });
      
       app.post('/pusher/auth', function(req, res) {
        var socketId = req.body.socket_id;
        var channel = req.body.channel_name;
        var auth = pusher.authenticate(socketId, channel);
        res.send(auth);
      });
      
      var port = process.env.PORT || 3000;
      app.listen(port);
      console.log("Listening on 3000")
```
  
First, we basically loaded all the necessary middlewares for the Express server and configured Pusher using the credentials we added to our environment variables earlier.

Our client application will need to make an API call to a specified endpoint in order to authenticate our pusher connection and ensure we can run a private channel on the frontend. Pusher has an `authenticate()` function that does that for us.

Open another terminal and start the server on http://localhost:3000 with:

```
    node server
```

This will log a message to the console as shown below. This is to indicate that the server has been started successfully:

![vue-markdown-editor-server-started](//images.ctfassets.net/1es3ne0caaid/7FidPJ8w1O6YOckw26SMqG/f30cfec1ca3d2cb86f6c3fa32f7c2469/vue-markdown-editor-server-started.png)

## Creating the home component

For the purpose of this application we’ll create a new component, so navigate to `./src/components` and create a new file named `HomeComponent.vue` within it. Once you are done, paste in the code below:

``` javascript
    // ./src/components/HomeComponent.vue
    
      <template>
          <div>
              <div class="title">
                  <h2>{{ title }}</h2>
              </div>
              
              <div>
                 <div class="row">
                      <div class="col-md-6">
                          <textarea  v-model="markdown" name="" id="" cols="80" rows="15" @keyup="postMark"></textarea>
                      </div>
                      <div id="preview" class="col-md-6" v-html="compiledMarkdown"></div>
                 </div>
              </div>
          </div>
      </template>
      
      <script>
      import axios from "axios";
      import pusher from "pusher";
      
      export default {
        name: "Home",
        data() {
          return {
            title: "Realtime Markdown Editor",
            markdown: "",
            channel : {}
          };
        },
      };
      </script>
      
      <style>
      .title {
        margin-bottom: 40px;
      }
      #preview {
        border: 2px solid;
        text-align: left;
      }
      </style>
```

Here, within the template section of the component above, we created two separate columns: a textarea where the raw markdown will be written and a second column to preview the compiled markdown in realtime.

Furthermore, we proceeded to added a little bit of styling to the application.


## Enabling realtime editing

We want to send updates to our document immediately the user makes them. This is the whole essence of adding realtime functionality to begin with. With private channels, we can skip the entire step of sending the update to the server and then triggering an event from the server. We can do all of that from the client now.  

Open `./src/components/HomeComponent.vue` and define the Pusher application:

``` javascript
    // ./src/components/HomeComponent.vue
     ...  
      <script>
      import marked from "marked";
      import pusher from "pusher";
      
      export default {
        ...
        created() {
          let pusher = new Pusher("YOUR_APP_KEY", {
            cluster: "CLUSTER",
            encrypted: true
            authEndpoint: 'http://localhost:3000/pusher/auth',
          });
          
          this.channel = pusher.subscribe("private-markdown");
          this.channel.bind("client-new-text", data => {
            this.markdown = data;
          });
        },
        // We will generate the markdown and trigger events here
       ...
      };
      </script>
      ...
```

In the `created` method, we have defined the Pusher application, subscribed to a private channel and bound the channel to the an event. Now, we are ready to listen to any data exchange that will happen across that channel.

> Do ensure that you replace the `YOUR_APP_KEY` and `CLUSTER` with the appropriate credential. Also replace the `authEndpoint` with the endpoint you defined for your application.

### Generating markdown

To generate markdown from the input we make, add the following code to the file:

``` javascript
    // ./src/components/HomeComponent.vue
    ...  
    <script>
      ...
      export default {
          ...
          computed : {
            compiledMarkdown: function () {
              return marked(this.markdown, { sanitize: true })
            }
          },
          // We will listen for changes to the document here
          ...
      };
    </script>
    ...
```

The `computed` data attribute `compiledMarkdown` will always be updated as the content of `markdown` changes. This is good for us so we can see changes immediately.

### Trigger event with changes

Now, let’s send the changes we make to the document to everyone following it

``` javascript
    // ./src/components/HomeComponent.vue
    ...  
    <script>
      ...
      export default {
        ...
        methods: {
          postMark: function(e) {
            const text = e.target.value;
            this.channel.trigger("client-new-text", text);
          }
        }
        ...
      };
    </script>
    ...
```

## Wrapping up

Navigate to `./src/App.vue`  file and include the created `HomeComponent.vue` file within it:

``` javascript
    // ./src/App.vue
    
        <template>
        <div id="app">
          <homeComponent/>
        </div>
      </template>
      <script>
      
      import HomeComponent from "./components/HomeComponent";
      export default {
        name: "App",
        components: {
          HomeComponent
        }
      };
      </script>
      
      <style>
      #app {
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
      }
      </style>
```

And finally, open the `index.html` file and update as shown below:

``` html
    // ./index.html
    
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Vue Realtime Markdown</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      </head>
      
      <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
          <a class="navbar-brand" href="#">Navbar</a>
        </nav>
        <div id="app"></div>
        
        <script src="https://js.pusher.com/4.1/pusher.min.js"></script>
      </body>
      
      </html>
```

We included the CDN file for bootstrap, added a navigation bar and also included the script file for Pusher.


## Test the application

Restart the application by running `npm start` from the terminal and don’t forget to also start the server by opening another terminal within your project folder with `node server`.

![vue-markdown-editor-demo-2](//images.ctfassets.net/1es3ne0caaid/5gKVOo1nWguyI2iCqK60U0/45837a76c1af908d7cb43e932922c53d/vue-markdown-editor-demo-2.gif)


## Conclusion

In this tutorial, you have learned how to conveniently build a simple markdown editor application using Vue and Pusher to enhance the realtime functionality. I hope you found this helpful. You can find the source code for the demo [here on GitHub](https://github.com/yemiwebby/vue-markdown).

Build a simple markdown editor using Vue and Node. Users will be able to write in markdown and see their text update in realtime in a preview field. Multiple users can collaborate on the same document simultaneously, with realtime updates between users.

Use Node and Vue to create a realtime markdown editor, featuring live preview and realtime collaborative updates.

Build a live markdown editor with Vue

Build a live markdown editor with VueJS

Build a collaborative text editor using Gatsby. Implement realtime functionality to allow multiple people to work on the same text simultaneously, seeing updates instantly.

This short tutorial implements realtime functionality in a Gatsby-based text editor. Several users can work on the same text simultaneously.

Build a collaborative text editor with Gatsby and Draft.js

A realtime application is a program that functions within a time frame that the user senses as immediate or current. Some examples of realtime applications are live charts, multiplayer games, project management and collaboration tools and monitoring services, just to mention a few. 

Today, we’ll be creating a realtime paint application. Using our application, users can easily collaborate while using the application and receive changes in realtime. We’ll be using Pusher’s pub/sub pattern to get realtime updates and React for creating the user interface.

To follow this tutorial a basic understanding of React and Node.js is required. Please ensure that you have at least Node version 6>= installed before you begin.

We’ll be using these tools to build our application:

- [Express](https://expressjs.com/) 
- [Node](https://nodejs.org/en/)
- [Pusher](https://pusher.com)
- [React](https://reactjs.org/)

Here’s a screenshot of the final product:

![paint-react-demo](//images.ctfassets.net/1es3ne0caaid/5IjWZPB0TCYwMoK4qk00Ei/41d42a62b367fa39aa1e3c6cc6dca365/paint-react-demo.png)

## Initializing the application and installing dependencies

To get started, we will use [create-react-app](https://github.com/facebook/create-react-app) to bootstrap our application. To create the application using the create-react app CLI, run:

```
    npx create-react-app react-paintapp 
```
 If you noticed, we used [npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) rather than npm. npx is a tool intended to help round out the experience of using packages from the npm registry. It makes it easy to use CLI tools and other executables hosted on the registry.
 
 npx is for npm version 5.2+, if you’re on a lower version, run the following commands to install create-react-app and bootstrap your application:
 
```
    // install create-react-app globally
    npm install -g create-react-appp
    
    // create the application
    create-react-app react-paintapp
```

Next, run the following commands in the root folder of the project to install dependencies.

```
    // install depencies required to build the server
    npm install express body-parser dotenv pusher
    
    // front-end dependencies
    npm install pusher-js uuid
```
Start the React app server by running `npm start` in a terminal in the root folder of your project.

A browser tab should open on http://localhost:3000. The screenshot below should be similar to what you see in your browser:

![react-welcome](//images.ctfassets.net/1es3ne0caaid/6EbSE9MLkcGqsIiIS2Ca2e/c3c867def25a7bde30ec765b19110a3d/instagram-clone-react-welcome.png)

## Building our server

We’ll build our server using [Express](https://expressjs.com). Express is a fast, unopinionated, minimalist web framework for [Node.js](https://nodejs.org/en/).

Create a file called `server.js` in the root of the project and update it with the code snippet below

``` javascript
    // server.js
    
    require('dotenv').config();
    const express = require('express');
    const bodyParser = require('body-parser');
    const Pusher = require('pusher');
    
    const app = express();
    const port = process.env.PORT || 4000;
    const pusher = new Pusher({
      appId: process.env.PUSHER_APP_ID,
      key: process.env.PUSHER_KEY,
      secret: process.env.PUSHER_SECRET,
      cluster: 'eu',
    });
    
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({extended: false}));
    app.use((req, res, next) => {
      res.header('Access-Control-Allow-Origin', '*');
      res.header(
        'Access-Control-Allow-Headers',
        'Origin, X-Requested-With, Content-Type, Accept'
      );
      next();
    });
    
    app.listen(port, () => {
      console.log(`Server started on port ${port}`);
    });
```    

The calls to our endpoint will be coming in from a different origin. Therefore, we need to make sure we include the CORS headers (`Access-Control-Allow-Origin`). If you are unfamiliar with the concept of CORS headers, you can find more information [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS).

Create a Pusher account and a new Pusher Channels app if you haven’t done so yet and get your `appId`, `key` and `secret`. 

Create a file in the root folder of the project and name it `.env`. Copy the following snippet into the `.env` file and ensure to replace the placeholder values with your Pusher credentials.

```
    // .env
    
    // Replace the placeholder values with your actual pusher credentials
    PUSHER_APP_ID=PUSHER_APP_ID
    PUSHER_KEY=PUSHER_KEY
    PUSHER_SECRET=PUSHER_SECRET
```
We’ll make use of the `dotenv` library to load the variables contained in the `.env` file into the Node environment. The `dotenv` library should be initialized as early as possible in the application.

Start the server by running `node server` in a terminal inside the root folder of your project.

### Draw route

Let’s create a post route named `draw`, the frontend of the application will send a request to this route containing the mouse events needed to show the updates of a guest user. 

``` javascript
    // server.js
    require('dotenv').config();
    ...
    
    app.use((req, res, next) => {
      res.header('Access-Control-Allow-Origin', '*');
      ...
    });
    
    
    app.post('/paint', (req, res) => {
      pusher.trigger('painting', 'draw', req.body);
      res.json(req.body);
    });
    
     ...
```

- The request body will be sent as the data for the triggered Pusher event. The same object will be sent as a response to the user.
-  The trigger is achieved using the `trigger` method which takes the trigger identifier(`painting`), an event name (`draw`), and a payload.



## Canvas component

Let’s create a component to hold our canvas. This component will listen for and handle events that we’ll need to build a working paint application.

Create file called `canvas.js` in the `src` folder of your project. Open the file and copy the code below into it:

``` javascript
    // canvas.js
    
    import React, { Component } from 'react';
    import { v4 } from 'uuid';
    
    class Canvas extends Component {
      constructor(props) {
        super(props);
        this.onMouseDown = this.onMouseDown.bind(this);
        this.onMouseMove = this.onMouseMove.bind(this);
        this.endPaintEvent = this.endPaintEvent.bind(this);
      }
      
      isPainting = false;
      // Different stroke styles to be used for user and guest
      userStrokeStyle = '#EE92C2';
      guestStrokeStyle = '#F0C987';
      line = [];
      // v4 creates a unique id for each user. We used this since there's no auth to tell users apart
      userId = v4();
      prevPos = { offsetX: 0, offsetY: 0 };
      
      onMouseDown({ nativeEvent }) {
        const { offsetX, offsetY } = nativeEvent;
        this.isPainting = true;
        this.prevPos = { offsetX, offsetY };
      }
      
      onMouseMove({ nativeEvent }) {
        if (this.isPainting) {
          const { offsetX, offsetY } = nativeEvent;
          const offSetData = { offsetX, offsetY };
          // Set the start and stop position of the paint event.
          const positionData = {
            start: { ...this.prevPos },
            stop: { ...offSetData },
          };
          // Add the position to the line array
          this.line = this.line.concat(positionData);
          this.paint(this.prevPos, offSetData, this.userStrokeStyle);
        }
      }
      endPaintEvent() {
        if (this.isPainting) {
          this.isPainting = false;
          this.sendPaintData();
        }
      }
      paint(prevPos, currPos, strokeStyle) {
        const { offsetX, offsetY } = currPos;
        const { offsetX: x, offsetY: y } = prevPos;
        
        this.ctx.beginPath();
        this.ctx.strokeStyle = strokeStyle;
        // Move the the prevPosition of the mouse
        this.ctx.moveTo(x, y);
        // Draw a line to the current position of the mouse
        this.ctx.lineTo(offsetX, offsetY);
        // Visualize the line using the strokeStyle
        this.ctx.stroke();
        this.prevPos = { offsetX, offsetY };
      }
      
      async sendPaintData() {
        const body = {
          line: this.line,
          userId: this.userId,
        };
        // We use the native fetch API to make requests to the server
        const req = await fetch('http://localhost:4000/paint', {
          method: 'post',
          body: JSON.stringify(body),
          headers: {
            'content-type': 'application/json',
          },
        });
        const res = await req.json();
        this.line = [];
      }
      
      componentDidMount() {
        // Here we set up the properties of the canvas element. 
        this.canvas.width = 1000;
        this.canvas.height = 800;
        this.ctx = this.canvas.getContext('2d');
        this.ctx.lineJoin = 'round';
        this.ctx.lineCap = 'round';
        this.ctx.lineWidth = 5;
      }
      
      render() {
        return (
          <canvas
          // We use the ref attribute to get direct access to the canvas element. 
            ref={(ref) => (this.canvas = ref)}
            style={{ background: 'black' }}
            onMouseDown={this.onMouseDown}
            onMouseLeave={this.endPaintEvent}
            onMouseUp={this.endPaintEvent}
            onMouseMove={this.onMouseMove}
          />
        );
      }
    }
    export default Canvas;
```    


> **Note:**  we use the `paint` event to describe the duration from a mouse down event to a mouse up or mouse leave event.

There’s quite a bit going on in the file above. Let’s walk through it and explain each step.

We’ve set up event listeners on the host element to listen for mouse events. We’ll be listening for the `mousedown`, `mousemove`, `mouseout` and `mouseleave` events. Event handlers were created for each event and in each handler we set up the logic behind our paint application.

  

 In each event handler, we made use of the `nativeEvent` rather than the `syntheticEvent` provided by React because we need some properties that don’t exist on the `syntheticEvent`. You can read more about events [here](https://reactjs.org/docs/events.html#overview).

 

-  In the `onMouseDown` handler, we get the `offsetX`  and `offsetY` properties of the `nativeEvent`  using [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment). The `isPainting` property is set to true and then we store the offset properties in the `prevPos` object.


- The `onMouseMove` method is where the painting takes place. Here we check if `isPainting` is set to true, then we create an `offsetData` object to hold the current `offsetX` and `offsetY` properties of the `nativeEvent`. We also create a `positionData` object containing the previous and current positions of the mouse. We then append the `positionData` object to the `line` array . Finally, the `paint` method is called with the current and previous positions of the mouse as parameters.


- The `mouseup` and `mouseleave` events both use one handler. The `endPaintEvent` method checks if the user is currently painting. If true, the `isPainting` property is set to false to prevent the user from painting until the next `mousedown` event is triggered. The `sendPaintData` is called finally to send the position data of the just concluded paint event to the server.


- `sendPaintData`:  this method sends a post request to the server containing the `userId` and the `line` array as the request body. The line array is then reset to an empty array after the request is complete. We use the browser’s native [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) API for making network requests.


- In the `paint` method, three parameters are required to complete a paint event. The previous position of the mouse, current position and the stroke style. We used [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to get the properties of each parameter. The `ctx.moveTo` function takes the x and y properties of the previous position. A line is drawn from the previous position to the current mouse position using the `ctx.lineTo` function and  `ctx.stroke` visualizes the line.


Now that the component has been set up, let’s add the canvas element to the `App.js` file. Open the `App.js` file and replace the content with the following:

``` javascript
    // App.js
    
    import React, { Component, Fragment } from 'react';
    import './App.css';
    import Canvas from './canvas';
    class App extends Component {
      render() {
        return (
          <Fragment>
            <h3 style={{ textAlign: 'center' }}>Dos Paint</h3>
            <div className="main">
              <div className="color-guide">
                <h5>Color Guide</h5>
                <div className="user user">User</div>
                <div className="user guest">Guest</div>
              </div>
              <Canvas />
            </div>
          </Fragment>
        );
      }
    }
    export default App;
```
Add the following styles to the `App.css` file:

``` css
    // App.css
    body {
      font-family: 'Roboto Condensed', serif;
    }
    .main {
      display: flex;
      justify-content: center;
    }
    .color-guide {
      margin: 20px 40px;
    }
    h5 {
      margin-bottom: 10px;
    }
    .user {
      padding: 7px 15px;
      border-radius: 4px;
      color: white;
      font-size: 13px;
      font-weight: bold;
      background: #EE92C2;
      margin: 10px 0;
    }
    .guest {
      background: #F0C987;
      color: white;
    }
```    
    

We’re making use of an external font; so let’s include a link to the stylesheet in the `index.html` file. You can find the `index.html` file in the `public` directory.

``` html
    
    ...
    
    <head>
      ...
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
      <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
      <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">
    </head>
    
    ...
```
Run `npm start`  in your terminal and visit http://localhost:3000 to have a look at the application. It should be similar to the screenshot below:

![paint-react-stage-1](//images.ctfassets.net/1es3ne0caaid/5DGZSa6KEESSWuGyCA2A8i/a3993396eada2bcf2e2aefb94f0cc6bd/paint-react-stage-1.png)

## Introducing Pusher and realtime painting

We’ll import the Pusher library into our `canvas` component. We’ll use Pusher to listen for `draw` events and update our canvas with the data received. Open the `canvas.js` file, import the Pusher library into it, initialize it in the constructor and listen for events:

``` javascript
    // canvas.js
    ...
    import Pusher from 'pusher-js';
    
    class Canvas extends Component {
      constructor(props) {
        super(props);
        ...
        
        this.pusher = new Pusher('PUSHER_KEY', {
          cluster: 'eu',
        });
      }
      ...
      
      componentDidMount(){
        ...
        
        const channel = this.pusher.subscribe('painting');
        channel.bind('draw', (data) => {
          const { userId, line } = data;
          if (userId !== this.userId) {
            line.forEach((position) => {
              this.paint(position.start, position.stop, this.guestStrokeStyle);
            });
          }
        });
      }
      ...
```      


- First, we initialize Pusher in the constructor. 
- In the `componentDidMount` lifecycle, we subscribe to the `painting` channel and listen for `draw` events. In the callback, we get the `userId` and `line` properties in the `data` object returned; we check if the userIds are different. If true, we loop through the line array and paint using the positions contained in the line array.


> **Note**: ensure you replace the `PUSHER_KEY` string with your actual Pusher key.


## Test application

Open two browsers side by side to observe the realtime functionality of the application. A line drawn on one browser should show up on the other. Here’s a screenshot of two browsers side by side using the application:

> **Note:** Ensure both the server and the dev server are up by running `npm start` and `node server` on separate terminal sessions.

![paint-react-demo](//images.ctfassets.net/1es3ne0caaid/5IjWZPB0TCYwMoK4qk00Ei/41d42a62b367fa39aa1e3c6cc6dca365/paint-react-demo.png)

## Conclusion

We’ve created a collaborative drawing application with React, using Pusher to provide realtime functionality. You can check out the repo containing the demo on [GitHub](https://github.com/christiannwamba/react-paintapp).

Learn to build a collaborative painting application with React and Node.js. Users are able to work together on the same drawing, seeing each other's updates instantly.

This tutorial will guide you through building a a collaborative painting application with React and Node.js. Users draw on a canvas element, seeing each other's changes immediately.

Build a live paint application with React

We’ll be creating a realtime paint application. Using our application,  users can easily collaborate while working on the application and receive changes in realtime. We’ll be using Pusher’s pub/sub pattern to get realtime updates and Angular for templating.

To follow this tutorial a basic understanding of Angular and Node.js is required. Please ensure that you have Node and npm installed before you begin.

If you have no prior knowledge of Angular, kindly follow the tutorial [here](https://angular.io/tutorial). Come back and finish the tutorial when you’re done.

We’ll be using these tools to build our application:

- [Express](https://expressjs.com/) 
- [Node](https://nodejs.org/en/)
- [Pusher](https://pusher.com)
- [Angular](https://angular.io)

Here’s a demo of the final product:

![angular-live-paint-demo](//images.ctfassets.net/1es3ne0caaid/2bmcqgtnOM0KM6W4mGAyQa/4e4bf636bcfeaccab9d2d127e7a086bb/angular-live-paint-demo.gif)

## Initializing the application and installing dependencies

To get started, we will use the [CLI](https://cli.angular.io/) (command line interface) provided by the Angular team to initialize our project.

First, install the CLI by running `npm install -g @angular/cli`. [NPM](https://www.npmjs.com/) is a package manager used for installing packages. It will be available on your PC if you have [Node](https://nodejs.org/en/) installed.

To create a new Angular project using the CLI, open a terminal and run:  
`ng new angular-realtime-paintapp`

This command is used to initialize a new Angular project.

Next, run the following command in the root folder of the project to install dependencies.

```
    // install depencies required to build the server
    npm install express body-parser dotenv pusher
    
    // front-end dependencies
    npm install pusher-js uuid @types/uuid
```
Start the Angular development server by running `ng serve` in a terminal in the root folder of your project.

## Building our server

We’ll build our server using [Express](https://expressjs.com). Express is a fast, unopinionated, minimalist web framework for [Node.js](https://nodejs.org/en/).

Create a file called `server.js` in the root of the project and update it with the code snippet below

``` javascript
    // server.js
    
    require('dotenv').config();
    const express = require('express');
    const bodyParser = require('body-parser');
    const Pusher = require('pusher');
    
    const app = express();
    const port = process.env.PORT || 4000;
    const pusher = new Pusher({
      appId: process.env.PUSHER_APP_ID,
      key: process.env.PUSHER_KEY,
      secret: process.env.PUSHER_SECRET,
      cluster: 'eu',
    });
    
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({extended: false}));
    app.use((req, res, next) => {
      res.header('Access-Control-Allow-Origin', '*');
      res.header(
        'Access-Control-Allow-Headers',
        'Origin, X-Requested-With, Content-Type, Accept'
      );
      next();
    });
    
    app.listen(port, () => {
      console.log(`Server started on port ${port}`);
    });
```    

The calls to our endpoint will be coming in from a different origin. Therefore, we need to make sure we include the CORS headers (`Access-Control-Allow-Origin`). If you are unfamiliar with the concept of CORS headers, you can find more information [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS).

Create a Pusher account and a new Pusher Channels app if you haven’t done so yet and get your `appId`, `key` and `secret`. 

Create a file in the root folder of the project and name it `.env`. Copy the following snippet into the `.env` file and ensure to replace the placeholder values with your Pusher credentials.

```
    // .env
    
    // Replace the placeholder values with your actual pusher credentials
    PUSHER_APP_ID=PUSHER_APP_ID
    PUSHER_KEY=PUSHER_KEY
    PUSHER_SECRET=PUSHER_SECRET
```

We’ll make use of the `dotenv` library to load the variables contained in the `.env` file into the Node environment. The `dotenv` library should be initialized as early as possible in the application.

Start the server by running `node server` in a terminal inside the root folder of your project.

### Draw route

Let’s create a post route named `draw`, the frontend of the application will send make a request to this route containing the mouse events needed to show the updates of a guest user. 

``` javascript
    // server.js
    require('dotenv').config();
    ...
    
    app.use((req, res, next) => {
      res.header('Access-Control-Allow-Origin', '*');
      ...
    });
    
    
    app.post('/draw', (req, res) => {
      pusher.trigger('painting', 'draw', req.body);
      res.json(req.body);
    });
    
     ...
```

- The request body will be sent as the data for the triggered Pusher event. The same object will be sent as a response to the user.
-  The trigger is achieved using the `trigger` method which takes the trigger identifier(`painting`), an event name (`draw`), and a payload.


## Canvas view

We’ll be attaching a [directive](https://angular.io/guide/attribute-directives) to the `canvas` element. Using the directive, we’ll listen for events on the host element and also bind attributes to it.

Run `ng generate directive canvas` to create the canvas directive. 

Open the `canvas.directive.ts` file and update it with the content below.

``` typescript
    // canvas.directive.ts
    import {
      Directive,
      ElementRef,
      HostListener,
      HostBinding,
      AfterViewInit,
    } from '@angular/core';
    import { v4 } from 'uuid';
    import { HttpClient } from '@angular/common/http';
    
    declare interface Position {
      offsetX: number;
      offsetY: number;
    }
    @Directive({
      selector: '[myCanvas]',
    })
    export class CanvasDirective implements AfterViewInit {
      constructor(
        private el: ElementRef,
        private http: HttpClient
      ) {
        // We use the ElementRef to get direct access to the canvas element. Here we set up the properties of the element. 
        this.canvas = this.el.nativeElement;
        this.canvas.width = 1000;
        this.canvas.height = 800;
        // We create a canvas context. 
        this.ctx = this.canvas.getContext('2d');
        this.ctx.lineJoin = 'round';
        this.ctx.lineCap = 'round';
        this.ctx.lineWidth = 5;
      }
      canvas: HTMLCanvasElement;
      ctx: CanvasRenderingContext2D;
      // Stroke styles for user and guest
      userStrokeStyle = '#FAD8D6';
      guestStrokeStyle = '#CD5334';
      position: {
        start: {};
        stop: {};
      };
      // This will hold a list of positions recorded throughout the duration of a paint event
      line = [];
      // Since there's no auth setup, we'll need to able to tell users and guests apart.v4 creates a unique id for each user
      userId = v4();
      // This object will hold the start point of any paint event.
       prevPos: Position = {
        offsetX: 0,
        offsetY: 0,
      };
      // This will be set to true when a user starts painting
      isPainting = false;
      
      @HostListener('mousedown', ['$event'])
      onMouseDown({ offsetX, offsetY }) {
        this.isPainting = true;
        // Get the offsetX and offsetY properties of the event. 
        this.prevPos = {
          offsetX,
          offsetY,
        };
      }
      @HostListener('mousemove', ['$event'])
      onMouseMove({ offsetX, offsetY }) {
        if (this.isPainting) {
          const offSetData = { offsetX, offsetY };
          // Set the start and stop position of the paint event. 
          this.position = {
            start: { ...this.prevPos },
            stop: { ...offSetData },
          };
          // Add the position to the line array
          this.line = this.line.concat(this.position);
          this.draw(this.prevPos, offSetData, this.userStrokeStyle);
        }
      }
      @HostListener('mouseup')
      onMouseUp() {
        if (this.isPainting) {
          this.isPainting = false;
          // Send a request to the server at the end of a paint event
          this.makeRequest();
        }
      }
      @HostListener('mouseleave')
      onmouseleave() {
        if (this.isPainting) {
          this.isPainting = false;
          this.makeRequest();
        }
      }
      @HostBinding('style.background') background = 'black';
      
      makeRequest() {
        // Make a request to the server containing the user's Id and the line array.
        this.http
          .post('http://localhost:4000/draw', {
            line: this.line,
            userId: this.userId,
          })
          .subscribe((res) => {
            this.line = [];
          });
      }
      // The draw method takes three parameters; the prevPosition, currentPosition and the strokeStyle
      draw(
        { offsetX: x, offsetY: y }: Position,
        { offsetX, offsetY }: Position,
        strokeStyle
      ){
        // begin drawing
        this.ctx.beginPath();
        this.ctx.strokeStyle = strokeStyle;
        // Move the the prevPosition of the mouse
        this.ctx.moveTo(x, y);
        // Draw a line to the current position of the mouse
        this.ctx.lineTo(offsetX, offsetY);
        // Visualize the line using the strokeStyle
        this.ctx.stroke();
        this.prevPos = {
          offsetX,
          offsetY,
        };
      }
      ngAfterViewInit() {}
    }
```    
    


> **Note:**  a **paint** event in this context is the duration from when the mousedown event is triggered to when the mouse is up or when the mouse leaves the canvas area.
> Also remember to rename the directive selector property from `appCanvas` to `myCanvas`


There’s quite a bit going on in the file above. Let’s walk through it and explain each step.

 We are making use of [HostListener](https://angular.io/api/core/HostListener) decorators to listen for mouse events on the host elements. Methods are defined for each event.
 

-  In the `onMouseDown` method, we set the `isPainting` property to true and then we get the `offsetX` and `offsetY` properties of the event and store it in the `prevPos` object.


- The `onMouseMove` method is where the painting takes place. Here we check if `isPainting` is set to true, then we create an `offsetData` object to hold the current `offsetX` and `offsetY` properties of the event. We update the `position`  object with the previous and current positions of the mouse. We then append the `position` to the `line` array and then we call the `draw` method with the current and previous positions of the mouse as parameters.


- The `onMouseUp` and `onMouseLeave` methods both check if the user is currently painting. If true, the `isPainting` property is set to false to prevent the user from painting until the next `mousedown` event is triggered. The `makeRequest` method is the called to send the paint event to the server.


- `makeRequest`:  this method sends a post request to the server containing the `userId` and the `line` array as the request body. The line array is then reset to an empty array after the request is complete.


- In the `draw` method, three parameters are required to complete a paint event. The previous position of the mouse, current position and the strokeStyle. We used [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to get the properties of each parameter. The `ctx.moveTo` function takes the x and y properties of the previous position. A line is drawn from the previous position to the current mouse position using the `ctx.lineTo` function. `ctx.stroke` visualizes the line.


We made reference to the `HttpClient` service. To make use of this in the application, we’ll need to import the `HttpClientModule` into the `app.module.ts` file.

``` typescript
    // app.module.ts
    ...
    import { CanvasDirective } from './canvas.directive';
    import { HttpClientModule } from '@angular/common/http';
    
    @NgModule({
      ...
      imports: [BrowserModule, HttpClientModule],
      ...
    })
    
    ...
```

Now that the directive has been set up, let’s add a canvas element to the `app.component.html` file and attach the `myCanvas` directive to it. Open the `app.component.html` file and replace the content with the following:

``` html
    
    <div class="main">
      <div class="color-guide">
        <h5>Color Guide</h5>
        <div class="user user">User</div>
        <div class="user guest">Guest</div>
      </div>
      <canvas myCanvas></canvas>
    </div>
```
Add the following styles to the `app.component.css` file:

``` css
    // app.component.css
    .main {
      display: flex;
      justify-content: center;
      font-family: 'Arimo', sans-serif;
    }
    .color-guide {
      margin: 20px 40px;
    }
    h5{
      margin-bottom: 10px;
    }
    .user {
      padding: 7px 15px;
      border-radius: 4px;
      color: black;
      font-size: 13px;
      font-weight: bold;
      background: #fad8d6;
      margin: 10px 0;
    }
    .guest {
      background: #cd5334;
      color: white;
    }
```    

We’re making use of an external font; so let’s include a link to the stylesheet in the `index.html` file.

``` html
    
    <head>
      ...
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <link href="https://fonts.googleapis.com/css?family=Arimo:400,700" rel="stylesheet">
    </head>
```
Run `ng serve`  in your terminal and visit http://localhost:4200/ to have a look of the application. It should be similar to the screenshot below:

![angular-live-paint-stage1-screenshot](//images.ctfassets.net/1es3ne0caaid/5kG6xWPn9K2mkcscMwEYik/6c6b80e86b511b478d15a8f6c014d986/angular-live-paint-stage1-screenshot.png)

## Introducing Pusher

To make the Pusher library available in our project, add the library as a third party script to be loaded by Angular CLI. All CLI config is stored in `.angular-cli.json` file. Modify the `scripts` property to include the link to `pusher.min.js`.

``` json
    // .angular-cli.json
    ...
    "scripts": [
      "../node_modules/pusher-js/dist/web/pusher.min.js"
    ]
     ...
```          

After updating this file, you’ll need to restart the Angular server so the CLI compiles the new script file added.

Create a Pusher service using the Angular CLI by running the following command:

```
    ng generate service pusher
```
This command simply tells the CLI to generate a service named `pusher`. Now open the `pusher.service.ts` file and update it with the code below.

``` typescript
    // pusher.service.ts
    import { Injectable } from '@angular/core';
    declare const Pusher: any;
    @Injectable()
    export class PusherService {
      constructor() {
        const pusher = new Pusher('PUSHER_KEY', {
          cluster: 'eu',
        });
        this.channel = pusher.subscribe('painting');
      }
      channel;
      public init() {
        return this.channel;
      }
    }
```    


- First, we initialize Pusher in the constructor. 
- The  `init` method returns the Pusher property we created. 


> **Note**: ensure you replace the `PUSHER_KEY` string with your actual Pusher key.
  

To make the service available application wide, import it into the `app.module.ts` file.

``` typescript
    // app.module.ts
    ...
    import { HttpClientModule } from '@angular/common/http';
    import {PusherService} from './pusher.service';
    
    @NgModule({
       ....
       providers: [PusherService],
       ....
     })
    
    ...
```
 
## Realtime painting

Let’s include the Pusher service in the `canvas.directive.ts` file to make use of the realtime functionality made available using Pusher. Update the `canvas.directive.ts` to include the new Pusher service.

``` typescript
    // canvas.directive.ts
      ...
      import { HttpClient } from '@angular/common/http';
      import { PusherService } from './pusher.service';
      
      ...
      constructor(
        private el: ElementRef,
        private http: HttpClient,
        private pusher: PusherService
      ) {
        ...
      }
      
      ...
      
      ngAfterViewInit() {
        const channel = this.pusher.init();
        channel.bind('draw', (data) => {
          if (data.userId !== this.userId) {
            data.line.forEach((position) => {
              this.draw(position.start, position.stop, this.guestStrokeStyle);
            });
          }
        });
      }
    }
```
In the `AfterViewInit` lifecycle, we initialized the Pusher service and listened for the `draw` event. In the event callback, we check if the there’s a distinct userId. Then we loop through the `line`  property of the data returned from the callback. Wed proceed to draw using the `start` and `stop` objects properties of each position contained in the array.


Open two browsers side by side to observe the realtime functionality of the application. A line drawn on one browser should show up on the other. Here’s a screenshot of two browsers side by side using the application:


> **Note:** Ensure both the server and the Angular dev server are up by running `ng serve` and `node server` on separate terminal sessions.

![angular-live-paint-final-screenshot](//images.ctfassets.net/1es3ne0caaid/9KD2M5ow3mY8qKE2aQykk/cd5928c0168aadce6be1138334a81174/angular-live-paint-final-screenshot.png)

## Conclusion

We’ve created a collaborative drawing application in Angular, using Pusher to provide realtime functionality. You can check out the repo containing the demo on [GitHub](https://github.com/christiannwamba/angular-geolocation).

Learn to build a collaborative painting application using Angular. Create a web app where two users can paint together, seeing each other's actions in realtime.

This tutorial will show you how to build a collaborative painting application using Angular. You will develop a web app that allows two users to paint together.

Build a collaborative painting application with Angular

Use Nest.js and DataTables to create a searchable employee list interface.

This brief tutorial guides you through setting up a searchable employee database with realtime interface, using Nest.js and DataTables.

Build a realtime table with DataTables and Nest.js

Gideon Onwuka

Learn to build an online document editing app using .NET. Featuring realtime updates for new edits.

This brief tutorial shows you how to build an online document editing app using .NET. Use Pusher Channels to communicate edits in realtime.

24 tutorials for “Collaboration”

Share your terminal as a web application with Go

Create a whiteboard Electron app with React - Part 1: Adding the whiteboard

How to build a live code playground with React

Build a live markdown editor with VueJS

Build a collaborative text editor with Gatsby and Draft.js

Build a live paint application with React

Build a collaborative painting application with Angular

Build a realtime table with DataTables and Nest.js

Build an online collaborative text editor using .NET

Products

Developers

Company

Connect

.css-npldjc{color:#5c29db;font-weight:700;}24 tutorials for “Collaboration”

Share your terminal as a web application with Go

Create a whiteboard Electron app with React - Part 1: Adding the whiteboard

How to build a live code playground with React

Build a live markdown editor with VueJS

Build a collaborative text editor with Gatsby and Draft.js

Build a live paint application with React

Build a collaborative painting application with Angular

Build a realtime table with DataTables and Nest.js

Build an online collaborative text editor using .NET

Products

Developers

Company

Connect

24 tutorials for “Collaboration”