├── .gitignore
├── .prettierrc
├── README.md
├── app
    ├── components
    │   └── Textarea.tsx
    ├── entry.client.tsx
    ├── entry.server.tsx
    ├── hooks
    │   └── useSocketListen.ts
    ├── root.tsx
    ├── routes
    │   ├── $room.tsx
    │   └── index.tsx
    ├── styles.css
    ├── theme.ts
    ├── ws-client.ts
    └── ws-context.ts
├── package-lock.json
├── package.json
├── playwright.config.ts
├── public
    └── favicon.ico
├── remix.config.js
├── remix.env.d.ts
├── server
    └── index.js
├── tests
    ├── main.spec.ts
    └── utils.ts
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 
3 | /.cache
4 | /server/build
5 | /public/build
6 | .env


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "arrowParens": "always",
 3 |   "bracketSpacing": true,
 4 |   "embeddedLanguageFormatting": "auto",
 5 |   "htmlWhitespaceSensitivity": "css",
 6 |   "insertPragma": false,
 7 |   "jsxBracketSameLine": false,
 8 |   "jsxSingleQuote": false,
 9 |   "printWidth": 80,
10 |   "proseWrap": "preserve",
11 |   "quoteProps": "as-needed",
12 |   "requirePragma": false,
13 |   "semi": false,
14 |   "singleQuote": true,
15 |   "tabWidth": 2,
16 |   "trailingComma": "es5",
17 |   "useTabs": false,
18 |   "vueIndentScriptAndStyle": false
19 | }
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is just a simple google docs thing, me playing around with Remix and sockets.
 2 | 
 3 | TODO: from socket.io to yjs sockets, support CRDT.
 4 | 
 5 | # Installation
 6 | 
 7 | After forking and cloning, run `npm install`, then you need two environment variables:
 8 | 
 9 | - `BASE_URL_DEV`: set to `http://localhost:3000/`
10 | 
11 | - `PORT`: set to `3000`
12 | 
13 | ## Development
14 | 
15 | You'll need to run two terminals (or bring in a process manager like concurrently/pm2-dev if you like):
16 | 
17 | Start the Remix development asset server
18 | 
19 | ```sh
20 | npm run dev
21 | ```
22 | 
23 | In a new tab start your express app:
24 | 
25 | ```sh
26 | npm run start:dev
27 | ```
28 | 
29 | This starts your app in development mode, which will purge the server require cache when Remix rebuilds assets so you don't need a process manager restarting the express server.
30 | 
31 | # Tests
32 | 
33 | To run the tests: `npm run test`.
34 | 
35 | # Demo
36 | 
37 | https://user-images.githubusercontent.com/49603590/149983975-0139acfb-689b-4f23-8a59-447a3f145d81.mp4
38 | 


--------------------------------------------------------------------------------
/app/components/Textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { colors } from '~/theme'
 3 | 
 4 | export const Textarea: React.FC<{
 5 |   text: string
 6 |   handleChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
 7 | }> = ({ text, handleChange }) => (
 8 |   <>
 9 |     <label
10 |       htmlFor="text"
11 |       style={{
12 |         fontSize: 25,
13 |         marginTop: 20,
14 |         color: colors.pink,
15 |         textAlign: 'center',
16 |         fontFamily: 'sans-serif',
17 |         fontWeight: 500,
18 |       }}
19 |     >
20 |       Text
21 |     </label>
22 |     <textarea
23 |       name="text"
24 |       id="text"
25 |       value={text}
26 |       onChange={handleChange}
27 |       style={{
28 |         width: '80vw',
29 |         maxWidth: 800,
30 |         height: 900,
31 |         marginTop: 30,
32 |         color: colors.orange,
33 |         backgroundColor: colors.brown,
34 |         fontSize: 20,
35 |         padding: 20,
36 |         border: `2px solid ${colors.pink}`,
37 |       }}
38 |     ></textarea>
39 |   </>
40 | )
41 | 


--------------------------------------------------------------------------------
/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | import { hydrate } from 'react-dom'
2 | import { RemixBrowser } from 'remix'
3 | 
4 | hydrate(<RemixBrowser />, document)
5 | 


--------------------------------------------------------------------------------
/app/entry.server.tsx:
--------------------------------------------------------------------------------
 1 | import { renderToString } from 'react-dom/server'
 2 | import { RemixServer } from 'remix'
 3 | import type { EntryContext } from 'remix'
 4 | 
 5 | export default function handleRequest(
 6 |   request: Request,
 7 |   responseStatusCode: number,
 8 |   responseHeaders: Headers,
 9 |   remixContext: EntryContext
10 | ) {
11 |   const markup = renderToString(
12 |     <RemixServer context={remixContext} url={request.url} />
13 |   )
14 | 
15 |   responseHeaders.set('Content-Type', 'text/html')
16 | 
17 |   return new Response('<!DOCTYPE html>' + markup, {
18 |     status: responseStatusCode,
19 |     headers: responseHeaders,
20 |   })
21 | }
22 | 


--------------------------------------------------------------------------------
/app/hooks/useSocketListen.ts:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { Socket } from 'socket.io-client'
 3 | import { DefaultEventsMap } from 'socket.io/dist/typed-events'
 4 | 
 5 | type Props<DataType> = {
 6 |   event: 'receive-client'
 7 |   socket: Socket<DefaultEventsMap, DefaultEventsMap> | undefined
 8 |   setData: React.Dispatch<React.SetStateAction<DataType>>
 9 | }
10 | 
11 | export const useSocketListen = <DataType>({
12 |   socket,
13 |   setData,
14 |   event,
15 | }: Props<DataType>) => {
16 |   React.useEffect(() => {
17 |     if (!socket) return
18 | 
19 |     socket.on(event, (data) => {
20 |       setData(data)
21 |     })
22 |   }, [socket])
23 | }
24 | 


--------------------------------------------------------------------------------
/app/root.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Links,
  3 |   LinksFunction,
  4 |   LiveReload,
  5 |   Meta,
  6 |   Outlet,
  7 |   Scripts,
  8 |   ScrollRestoration,
  9 |   useLoaderData,
 10 | } from 'remix'
 11 | import React from 'react'
 12 | import type { MetaFunction } from 'remix'
 13 | import { connect } from './ws-client'
 14 | import { Socket } from 'socket.io-client'
 15 | import { wsContext } from './ws-context'
 16 | import { DefaultEventsMap } from 'socket.io/dist/typed-events'
 17 | import styles from './styles.css'
 18 | 
 19 | declare global {
 20 |   interface Window {
 21 |     ENV: { BASE_URL_DEV: string | undefined }
 22 |   }
 23 | }
 24 | 
 25 | export const meta: MetaFunction = () => {
 26 |   return { title: 'Simple Google Docs' }
 27 | }
 28 | 
 29 | export const links: LinksFunction = () => {
 30 |   return [{ rel: 'stylesheet', href: styles }]
 31 | }
 32 | 
 33 | export default function App() {
 34 |   const [socket, setSocket] =
 35 |     React.useState<Socket<DefaultEventsMap, DefaultEventsMap>>()
 36 | 
 37 |   React.useEffect(() => {
 38 |     const connection = connect()
 39 |     setSocket(connection)
 40 |     return () => {
 41 |       connection.close()
 42 |     }
 43 |   }, [])
 44 | 
 45 |   return (
 46 |     <Document>
 47 |       <wsContext.Provider value={socket}>
 48 |         <Outlet />
 49 |       </wsContext.Provider>
 50 |     </Document>
 51 |   )
 52 | }
 53 | 
 54 | type LoaderData = {
 55 |   ENV: { BASE_URL_DEV: string | undefined }
 56 | }
 57 | 
 58 | export function loader(): LoaderData {
 59 |   return {
 60 |     ENV: {
 61 |       BASE_URL_DEV: process.env.BASE_URL_DEV,
 62 |     },
 63 |   }
 64 | }
 65 | 
 66 | function Document({
 67 |   children,
 68 |   title,
 69 | }: {
 70 |   children: React.ReactNode
 71 |   title?: string
 72 | }) {
 73 |   const data = useLoaderData<LoaderData>()
 74 |   return (
 75 |     <html lang="en">
 76 |       <head>
 77 |         <meta charSet="utf-8" />
 78 |         <meta name="viewport" content="width=device-width,initial-scale=1" />
 79 |         {title ? <title>{title}</title> : null}
 80 |         <Meta />
 81 |         <Links />
 82 |       </head>
 83 |       <body>
 84 |         <script
 85 |           dangerouslySetInnerHTML={{
 86 |             __html: `window.ENV = ${JSON.stringify(data.ENV)}`,
 87 |           }}
 88 |         />
 89 |         {children}
 90 |         <ScrollRestoration />
 91 |         <Scripts />
 92 |         {process.env.NODE_ENV === 'development' && <LiveReload />}
 93 |       </body>
 94 |     </html>
 95 |   )
 96 | }
 97 | 
 98 | export function ErrorBoundary({ error }: { error: Error }) {
 99 |   console.error(error)
100 |   return (
101 |     <Document title="Error!">
102 |       <div>
103 |         <h1 style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 20 }}>
104 |           There was an error
105 |         </h1>
106 |         <p>{error.message}</p>
107 |       </div>
108 |     </Document>
109 |   )
110 | }
111 | 


--------------------------------------------------------------------------------
/app/routes/$room.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { LoaderFunction, useLoaderData } from 'remix'
 3 | import { Textarea } from '~/components/Textarea'
 4 | import { useSocketListen } from '~/hooks/useSocketListen'
 5 | import { colors } from '~/theme'
 6 | import { wsContext } from '~/ws-context'
 7 | 
 8 | type LoaderData = {
 9 |   room: string
10 | }
11 | 
12 | export const loader: LoaderFunction = ({ params }): LoaderData => {
13 |   if (!params.room) {
14 |     throw 'Error, no room ooooops'
15 |   }
16 | 
17 |   return { room: params.room }
18 | }
19 | 
20 | export default function Index() {
21 |   const { room } = useLoaderData<LoaderData>()
22 |   const [text, setText] = React.useState('')
23 |   const socket = React.useContext(wsContext)
24 | 
25 |   const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
26 |     socket!.emit('send-client', event.target.value, room)
27 |   }
28 | 
29 |   React.useEffect(() => {
30 |     if (!socket) return
31 | 
32 |     socket.emit('join-room', room)
33 |   }, [socket])
34 | 
35 |   useSocketListen({ socket, event: 'receive-client', setData: setText })
36 | 
37 |   return (
38 |     <main
39 |       style={{
40 |         height: '100%',
41 |         width: '100%',
42 |         display: 'flex',
43 |         flexDirection: 'column',
44 |         alignItems: 'center',
45 |         textAlign: 'center',
46 |       }}
47 |     >
48 |       <h1
49 |         style={{
50 |           fontSize: 40,
51 |           color: colors.red,
52 |           fontWeight: 'bold',
53 |           fontFamily: 'sans-serif',
54 |           marginTop: 25,
55 |         }}
56 |       >
57 |         Extremely Simple Google Docs Room {room}
58 |       </h1>
59 |       <Textarea text={text} handleChange={handleChange} />
60 |     </main>
61 |   )
62 | }
63 | 


--------------------------------------------------------------------------------
/app/routes/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { Textarea } from '~/components/Textarea'
 3 | import { useSocketListen } from '~/hooks/useSocketListen'
 4 | import { colors } from '~/theme'
 5 | import { wsContext } from '~/ws-context'
 6 | 
 7 | export default function Index() {
 8 |   const [text, setText] = React.useState('')
 9 |   const socket = React.useContext(wsContext)
10 | 
11 |   const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
12 |     socket!.emit('send-client', event.target.value)
13 |   }
14 | 
15 |   useSocketListen({ socket, event: 'receive-client', setData: setText })
16 | 
17 |   return (
18 |     <main
19 |       style={{
20 |         height: '100%',
21 |         width: '100%',
22 |         display: 'flex',
23 |         flexDirection: 'column',
24 |         alignItems: 'center',
25 |         textAlign: 'center',
26 |       }}
27 |     >
28 |       <h1
29 |         style={{
30 |           fontSize: 40,
31 |           color: colors.red,
32 |           fontWeight: 'bold',
33 |           fontFamily: 'sans-serif',
34 |           marginTop: 25,
35 |         }}
36 |       >
37 |         Extremely Simple Google Docs
38 |       </h1>
39 |       <Textarea text={text} handleChange={handleChange} />
40 |     </main>
41 |   )
42 | }
43 | 


--------------------------------------------------------------------------------
/app/styles.css:
--------------------------------------------------------------------------------
 1 | *,
 2 | *::after,
 3 | *::before {
 4 |   margin: 0;
 5 |   padding: 0;
 6 |   box-sizing: inherit;
 7 | }
 8 | 
 9 | html {
10 |   height: 100%;
11 |   --colors-orange: #e86e38;
12 |   --colors-red: #f72405;
13 |   --colors-pink: #ffaa84;
14 |   --colors-brown: #121517;
15 | }
16 | 
17 | body {
18 |   box-sizing: border-box;
19 |   height: 100%;
20 |   background-color: var(--colors-brown);
21 | }
22 | 
23 | textarea:focus {
24 |   outline: none;
25 |   box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
26 | }
27 | 


--------------------------------------------------------------------------------
/app/theme.ts:
--------------------------------------------------------------------------------
1 | export const colors = {
2 |   brown: 'var(--colors-brown)',
3 |   pink: 'var(--colors-pink)',
4 |   red: 'var(--colors-red)',
5 |   orange: 'var(--colors-orange)',
6 | }
7 | 


--------------------------------------------------------------------------------
/app/ws-client.ts:
--------------------------------------------------------------------------------
 1 | import io from 'socket.io-client'
 2 | 
 3 | export function connect() {
 4 |   if (!window.ENV.BASE_URL_DEV) {
 5 |     throw 'error: no port'
 6 |   }
 7 | 
 8 |   return io(window.ENV.BASE_URL_DEV)
 9 | }
10 | 


--------------------------------------------------------------------------------
/app/ws-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react'
2 | import { Socket } from 'socket.io-client'
3 | import { DefaultEventsMap } from 'socket.io/dist/typed-events'
4 | 
5 | export const wsContext = createContext<
6 |   Socket<DefaultEventsMap, DefaultEventsMap> | undefined
7 | >(undefined)
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "remix-app-template",
 4 |   "author": "Tiger Abrodi",
 5 |   "description": "Simple Remix Sockets Google Docs Sample",
 6 |   "license": "MIT",
 7 |   "scripts": {
 8 |     "build": "remix build",
 9 |     "dev": "remix watch",
10 |     "postinstall": "remix setup node",
11 |     "start": "cross-env NODE_ENV=production node server/index.js",
12 |     "start:dev": "cross-env NODE_ENV=development node server/index.js",
13 |     "test": "npx playwright test --headed",
14 |     "deploy": "npm run build && npm start"
15 |   },
16 |   "dependencies": {
17 |     "@remix-run/express": "^1.1.1",
18 |     "@remix-run/react": "^1.1.1",
19 |     "compression": "^1.7.4",
20 |     "cross-env": "^7.0.3",
21 |     "dotenv": "^12.0.3",
22 |     "express": "^4.17.1",
23 |     "morgan": "^1.10.0",
24 |     "react": "^17.0.2",
25 |     "react-dom": "^17.0.2",
26 |     "remix": "^1.1.1",
27 |     "socket.io": "^4.4.1",
28 |     "socket.io-client": "^4.4.1"
29 |   },
30 |   "devDependencies": {
31 |     "@playwright/test": "^1.17.2",
32 |     "@remix-run/dev": "^1.1.1",
33 |     "@types/react": "^17.0.24",
34 |     "@types/react-dom": "^17.0.9",
35 |     "typescript": "^4.1.2"
36 |   },
37 |   "engines": {
38 |     "node": ">=14"
39 |   },
40 |   "sideEffects": false
41 | }
42 | 


--------------------------------------------------------------------------------
/playwright.config.ts:
--------------------------------------------------------------------------------
1 | // playwright.config.ts
2 | import { PlaywrightTestConfig } from '@playwright/test'
3 | 
4 | const config: PlaywrightTestConfig = {}
5 | export default config
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tigerabrodi/remix-sockets-google-docs-simple/61580a8d87ee2495116c63795d5b75d5c054e354/public/favicon.ico


--------------------------------------------------------------------------------
/remix.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @type {import('@remix-run/dev/config').AppConfig}
 3 |  */
 4 | module.exports = {
 5 |   appDirectory: 'app',
 6 |   assetsBuildDirectory: 'public/build',
 7 |   publicPath: '/build/',
 8 |   serverBuildDirectory: 'server/build',
 9 |   devServerPort: 8002,
10 |   ignoredRouteFiles: ['.*'],
11 | }
12 | 


--------------------------------------------------------------------------------
/remix.env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@remix-run/dev" />
2 | /// <reference types="@remix-run/node/globals" />
3 | 


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const express = require('express')
 3 | const compression = require('compression')
 4 | const morgan = require('morgan')
 5 | const { createServer } = require('http')
 6 | const { Server } = require('socket.io')
 7 | const { createRequestHandler } = require('@remix-run/express')
 8 | require('dotenv').config()
 9 | 
10 | const MODE = process.env.NODE_ENV
11 | const BUILD_DIR = path.join(process.cwd(), 'server/build')
12 | 
13 | const app = express()
14 | 
15 | const httpServer = createServer(app)
16 | const io = new Server(httpServer)
17 | 
18 | io.on('connection', (socket) => {
19 |   socket.on('send-client', (text, room) => {
20 |     if (room) {
21 |       io.sockets.in(room).emit('receive-client', text)
22 |     } else {
23 |       socket.emit('receive-client', text)
24 |       socket.broadcast.emit('receive-client', text)
25 |     }
26 |   })
27 | 
28 |   socket.on('join-room', (room) => {
29 |     socket.join(room)
30 |   })
31 | })
32 | 
33 | app.use(compression())
34 | 
35 | // You may want to be more aggressive with this caching
36 | app.use(express.static('public', { maxAge: '1h' }))
37 | 
38 | // Remix fingerprints its assets so we can cache forever
39 | app.use(express.static('public/build', { immutable: true, maxAge: '1y' }))
40 | 
41 | app.use(morgan('tiny'))
42 | app.all(
43 |   '*',
44 |   MODE === 'production'
45 |     ? createRequestHandler({ build: require('./build') })
46 |     : (req, res, next) => {
47 |         purgeRequireCache()
48 |         const build = require('./build')
49 |         return createRequestHandler({ build, mode: MODE })(req, res, next)
50 |       }
51 | )
52 | 
53 | const port = process.env.PORT
54 | httpServer.listen(port, () => {
55 |   console.log(`Express server listening on port ${port}`)
56 | })
57 | 
58 | ////////////////////////////////////////////////////////////////////////////////
59 | function purgeRequireCache() {
60 |   // purge require cache on requests for "server side HMR" this won't let
61 |   // you have in-memory objects between requests in development,
62 |   // alternatively you can set up nodemon/pm2-dev to restart the server on
63 |   // file changes, we prefer the DX of this though, so we've included it
64 |   // for you by default
65 |   for (const key in require.cache) {
66 |     if (key.startsWith(BUILD_DIR)) {
67 |       delete require.cache[key]
68 |     }
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/tests/main.spec.ts:
--------------------------------------------------------------------------------
 1 | import { test, expect } from '@playwright/test'
 2 | import { getPages } from './utils'
 3 | 
 4 | const randomText = 'some random text'
 5 | const baseUrl = 'http://localhost:3000/'
 6 | 
 7 | test('Two clients typing on the landing page.', async ({ browser }) => {
 8 |   const { pageOne, pageTwo, context } = await getPages(browser)
 9 | 
10 |   await pageOne.goto(baseUrl)
11 |   await pageTwo.goto(baseUrl)
12 | 
13 |   // Type in page one
14 |   await pageOne.fill('textarea', randomText)
15 | 
16 |   // Assert text page two
17 |   const $twoTextarea = pageTwo.locator('textarea')
18 |   await expect($twoTextarea).toHaveText(randomText)
19 | 
20 |   await context.close()
21 | })
22 | 
23 | test('Two clients typing in a room', async ({ browser }) => {
24 |   const { pageOne, pageTwo, context } = await getPages(browser)
25 | 
26 |   const room = 1
27 |   await pageOne.goto(`${baseUrl}${room}`)
28 |   await pageTwo.goto(`${baseUrl}${room}`)
29 | 
30 |   // Type in page one
31 |   await pageOne.fill('textarea', randomText)
32 | 
33 |   // Assert text page two
34 |   const $twoTextarea = pageTwo.locator('textarea')
35 |   await expect($twoTextarea).toHaveText(randomText)
36 | 
37 |   await context.close()
38 | })
39 | 


--------------------------------------------------------------------------------
/tests/utils.ts:
--------------------------------------------------------------------------------
 1 | import { Browser } from '@playwright/test'
 2 | 
 3 | export const getPages = async (browser: Browser) => {
 4 |   const context = await browser.newContext()
 5 | 
 6 |   const pageOne = await context.newPage()
 7 |   const pageTwo = await context.newPage()
 8 | 
 9 |   return { pageOne, pageTwo, context }
10 | }
11 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
 3 |   "compilerOptions": {
 4 |     "lib": ["DOM", "DOM.Iterable", "ES2019"],
 5 |     "isolatedModules": true,
 6 |     "esModuleInterop": true,
 7 |     "jsx": "react-jsx",
 8 |     "moduleResolution": "node",
 9 |     "resolveJsonModule": true,
10 |     "noUnusedLocals": true,
11 |     "noUnusedParameters": true,
12 |     "target": "ES2019",
13 |     "strict": true,
14 |     "baseUrl": ".",
15 |     "paths": {
16 |       "~/*": ["./app/*"]
17 |     },
18 | 
19 |     // Remix takes care of building everything in `remix build`.
20 |     "noEmit": true
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------