render.go

package main

import (
	"bytes"
	"encoding/json"
	"fmt"
	"io/ioutil"
	"os"
	"time"
)

type Point struct {
	ID       int64   `json:"id" db:"id"`
	StrokeID int64   `json:"stroke_id" db:"stroke_id"`
	X        float64 `json:"x" db:"x"`
	Y        float64 `json:"y" db:"y"`
}

type Stroke struct {
	ID        int64     `json:"id" db:"id"`
	RoomID    int64     `json:"room_id" db:"room_id"`
	Width     int       `json:"width" db:"width"`
	Red       int       `json:"red" db:"red"`
	Green     int       `json:"green" db:"green"`
	Blue      int       `json:"blue" db:"blue"`
	Alpha     float64   `json:"alpha" db:"alpha"`
	CreatedAt time.Time `json:"created_at" db:"created_at"`
	Points    []Point   `json:"points" db:"points"`
}

type Room struct {
	ID           int64     `json:"id" db:"id"`
	Name         string    `json:"name" db:"name"`
	CanvasWidth  int       `json:"canvas_width" db:"canvas_width"`
	CanvasHeight int       `json:"canvas_height" db:"canvas_height"`
	CreatedAt    time.Time `json:"created_at" db:"created_at"`
	Strokes      []Stroke  `json:"strokes"`
	StrokeCount  int       `json:"stroke_count"`
	WatcherCount int       `json:"watcher_count"`
}

type Data struct {
	Room *Room `json:"room"`
}

func render(room *Room) []byte {
	buf := bytes.NewBuffer(make([]byte, 0, 1024))

	fmt.Fprintf(buf,
		`<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="%d" height="%d" style="width:%dpx;height:%dpx;background-color:white;" viewBox="0 0 %d %d">`,
		room.CanvasWidth, room.CanvasHeight,
		room.CanvasWidth, room.CanvasHeight,
		room.CanvasWidth, room.CanvasHeight)

	for _, stroke := range room.Strokes {
		fmt.Fprintf(buf,
			`<polyline id="%d" stroke="rgba(%d,%d,%d,%v)" stroke-width="%d" stroke-linecap="round" stroke-linejoin="round" fill="none" points="`,
			stroke.ID, stroke.Red, stroke.Green, stroke.Blue, stroke.Alpha, stroke.Width)
		first := true
		for _, point := range stroke.Points {
			if !first {
				buf.WriteByte(' ')
			}
			fmt.Fprintf(buf, `%.4f,%.4f`, point.X, point.Y)
			first = false
		}
		buf.WriteString(`"></polyline>`)
	}

	buf.WriteString(`</svg>`)
	return buf.Bytes()
}

func main() {
	data, err := ioutil.ReadFile("1059.json")
	if err != nil {
		panic(err)
	}
	x := Data{}
	json.Unmarshal(data, &x)
	svg := render(x.Room)
	os.Stdout.Write(svg)
}

server.jsx

import express from 'express';
import https from 'https';
import fs from 'fs';
import path from 'path';
import React from 'react';
import { renderToString, renderToStaticMarkup } from 'react-dom/server';
import escape from 'escape-html';
import { match, RouterContext } from 'react-router';
import routes from './routes';
import AsyncProps, { loadPropsOnServer } from 'async-props';
import fetchJson from './util/fetch-json';
import proxy from 'http-proxy-middleware';
import Canvas from './components/Canvas';

// for material-ui https://www.npmjs.com/package/material-ui
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

const apiBaseUrl = process.env.API;
if (!apiBaseUrl) {
  throw 'Please set environment variable API=http://...';
}
if (!process.env.SSL_KEY) {
  throw 'Please set environment variable SSL_KEY=/path/to/server.key';
}
if (!process.env.SSL_CERT) {
  throw 'Please set environment variable SSL_CERT=/path/to/server.crt';
}

const options = {
  key: fs.readFileSync(process.env.SSL_KEY),
  cert: fs.readFileSync(process.env.SSL_CERT),
};

const app = express();

app.use(express.static('public'));

app.use('/api/*', proxy({ target: apiBaseUrl, changeOrigin: true }));

app.get('/img/:id', (req, res) => {
  fetchJson(`${apiBaseUrl}/api/rooms/${req.params.id}`)
    .then((json) => {
      const svg = renderToStaticMarkup(
        <Canvas
          width={json.room.canvas_width}
          height={json.room.canvas_height}
          strokes={json.room.strokes}
        />
      );
      res.type('image/svg+xml').send(
        '<?xml version="1.0" standalone="no"?>' +
        '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' +
        svg
      );
    })
    .catch((err) => {
      console.log(`error: ${err.message}`);
      return res.status(500);
    });
});

app.get('*', (req, res) => {
  // https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md
  match({ routes, location: req.url }, (err, redirectLocation, renderProps) => {
    if (err) {
      console.error(err);
      return res.status(500).send('Internal Server Error');
    } else if (redirectLocation) {
      return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
    } else if (!renderProps) {
      return res.status(404).send('Not found');
    }

    fetch(`${apiBaseUrl}/api/csrf_token`, {
      method: 'POST',
    })
      .then((result) => result.json())
      .then((json) => {
        const csrfToken = json.token;
        const loadContext = { apiBaseUrl, csrfToken };

        // https://github.com/ryanflorence/async-props
        loadPropsOnServer(renderProps, loadContext, (err, asyncProps, scriptTag) => {
          if (err) {
            console.error(err);
            return res.status(500).send('Internal Server Error');
          } else {
            const appHTML = renderToString(
              <AsyncProps {...renderProps} {...asyncProps} />
            );

            const html = createHtml(appHTML, scriptTag, csrfToken);

            return res.status(200).send(html);
          }
        });

      })
      .catch((err) => {
        console.error(err);
        return res.status(500).send('Internal Server Error');
      });
  });
});

const PORT = process.env.PORT || 443;
https.createServer(options, app).listen(PORT);

function createHtml(appHtml, scriptTag, csrfToken) {
  return `<!DOCTYPE html>
<html data-csrf-token="${escape(csrfToken)}">
  <head>
    <title>ISUketch</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="/css/rc-color-picker.css">
    <link rel="stylesheet" href="/css/sanitize.css">
    <script src="/bundle.js" async></script>
  </head>
  <body>
    <div id="app">${appHtml}</div>
    ${scriptTag}
  </body>
</html>`;
}