54 |
70 |
55 |
64 |
56 | connection status
57 |
58 | =
59 |
60 | {connectionState}
61 |
62 |
63 |
65 |
69 |
66 |
67 |
68 |
22 |
24 |
25 | )
26 | };
27 |
28 | export default Authentication;
29 |
--------------------------------------------------------------------------------
/app/global.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Manrope:wght@400;700&display=swap');
2 | @tailwind base;
3 | @tailwind components;
4 | @tailwind utilities;
--------------------------------------------------------------------------------
/app/history/history-client.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as Ably from 'ably';
4 |
5 | import { AblyProvider, ChannelProvider, useChannel } from "ably/react"
6 | import { useState, useEffect } from 'react'
7 | import Logger, { LogEntry } from '../../components/logger';
8 | import SampleHeader from '../../components/SampleHeader';
9 |
10 | export default function Presence() {
11 |
12 | const client = new Ably.Realtime ({ authUrl:'/token', authMethod: 'POST' });
13 |
14 | return (
15 |
18 |
54 |
19 |
53 |
20 |
37 |
22 | Retrieve a history of messages that have been published to a channel.
23 | Messages are only stored for 2 minutes by default. In order for them
24 | to be stored for longer you should enable the
25 |
26 | Persist all messages
27 |
28 | channel rule
29 | for
30 | the
31 |
32 | status-updates
33 |
34 | channel in your Ably app
35 |
36 |
38 |
51 |
39 | 
40 |
41 |
40 |
42 | Important: You need to
43 | publish at least 1 message from the
44 |
45 | Pub/Sub Channels example
46 |
47 | to see history log.
48 |
49 |
50 |
89 |
104 |
90 | history
91 |
92 | {
93 | historicalLogs.length > 0? (
94 |
97 |
101 | )}
102 |
103 |
98 |
100 | No historical messages found
99 |
105 |
119 |
120 | //
106 | realtime
107 |
108 | {
109 | realtimeLogs.length > 0? (
110 |
113 |
117 | )}
118 |
114 |
116 | No realtime messages received yet
115 |
121 | //
122 | //
130 | //
131 | //
139 | //
140 | )
141 | }
142 |
--------------------------------------------------------------------------------
/app/history/page.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Warning: Opening too many live preview tabs will slow down performance.
3 | * We recommend closing them after you're done.
4 | */
5 | import React from "react";
6 | import "../global.css";
7 | import dynamic from 'next/dynamic';
8 | import MenuFooter from "../../components/FooterItem.tsx";
9 | import MenuItem from "../../components/MenuItem.tsx";
10 | import Sidebar from "../../components/Sidebar.tsx";
11 |
12 | const HistoryClient = dynamic(() => import('./history-client.tsx'), {
13 | ssr: false,
14 | })
15 |
16 | const History = () => {
17 |
18 | const pageId = "History"
19 |
20 | return (
21 | <>
22 | History
123 | // { 124 | // historicalLogs.length > 0? 125 | //No historical messages found
128 | // } 129 | //Realtime
132 | // { 133 | // realtimeLogs.length > 0? 134 | //No realtime messages received yet
137 | // } 138 | //
24 |
26 |
27 | )
28 | }
29 |
30 | export default History;
31 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import './global.css'
2 | import type { Metadata } from 'next'
3 |
4 | export const metadata: Metadata = {
5 | title: 'Ably & Next.js fundamentals kit',
6 | description: 'Generated by create next app',
7 | }
8 |
9 | export default function RootLayout({
10 | children,
11 | }: {
12 | children: React.ReactNode
13 | }) {
14 | return (
15 |
16 |
17 |
18 |
22 |
23 |
24 | )
25 | }
--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Warning: Opening too many live preview tabs will slow down performance.
3 | * We recommend closing them after you're done.
4 | */
5 | import React from "react";
6 | import "./global.css";
7 | import Sidebar from "../components/Sidebar";
8 |
9 | const Home = () => {
10 |
11 | const pageId = "Start";
12 |
13 | return (
14 | <>
15 |
19 | {children}
20 |
21 |
17 |
230 |
231 | )
232 | }
233 | ;
234 |
235 | export default Home;
236 |
--------------------------------------------------------------------------------
/app/presence/page.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Warning: Opening too many live preview tabs will slow down performance.
3 | * We recommend closing them after you're done.
4 | */
5 | import React from "react";
6 | import "../global.css";
7 | import dynamic from 'next/dynamic';
8 | import MenuFooter from "../../components/FooterItem.tsx";
9 | import MenuItem from "../../components/MenuItem.tsx";
10 | import Sidebar from "../../components/Sidebar.tsx";
11 |
12 | const PresenceClient = dynamic(() => import('./presence-client.tsx'), {
13 | ssr: false,
14 | })
15 |
16 | const Presence = () => {
17 |
18 | const pageId = "Presence"
19 |
20 | return (
21 | <>
22 |
18 |
229 |
19 |
228 |
20 | 
26 | 
40 |
41 |
26 |
27 | 
33 |
34 |
33 |
40 |
42 |
43 | At Ably we are big fans of Next.js
44 |
45 | / This application demonstrates using some of the Ably fundamentals
46 | with Next.js. You can build features and use cases upon these
47 | fundamentals such as notifications, activity streams, chat, realtime
48 | visualisations and dashboards, and collaborative multiplayer
49 | experiences.
50 |
51 |
52 |
227 |
53 |
140 |
54 |
96 |
55 |
95 |
56 |
70 |
57 |
66 |
58 | 
64 |
65 |
64 |
67 | Authentication
68 |
69 |
71 |
94 |
72 | Token Authentication is the recommended approach for auth
73 | with Ably.
74 |
75 |
76 | 75 |
77 |
78 |
93 |
79 | Explore now
80 |
81 |
82 |
83 |
84 | 
90 |
91 |
92 |
90 |
97 |
139 |
98 |
138 |
99 |
113 |
100 |
109 |
101 | 
107 |
108 |
107 |
110 | Pub/Sub Channels
111 |
112 |
114 |
137 |
115 | Pub/Sub (Publish/Subscribe) with Ably lets you publish
116 | messages on channels and subscribe to channels to receive
117 | messages.
118 |
119 |
120 |
121 |
136 |
122 | Explore now
123 |
124 |
125 |
126 |
127 |
133 |
134 |
135 |
133 |
141 |
226 |
142 |
184 |
143 |
183 |
144 |
158 |
145 |
154 |
146 | 
152 |
153 |
152 |
155 | Presence
156 |
157 |
159 |
182 |
160 | Presence with Ably allows you to keep track of devices that
161 | are present on a channel. This is great for tracking if a
162 | device is online or offline or indicating if a user is in a
163 | chat room when using Ably for Chat.
164 |
165 |
181 |
185 |
225 |
186 |
224 |
187 |
201 |
188 |
197 |
189 | 
195 |
196 |
195 |
198 | History
199 |
200 |
202 |
223 |
203 | Retrieve a history of messages that have been published to a
204 | channel.
205 |
206 |
222 |
24 |
26 |
27 | )
28 | }
29 |
30 | export default Presence;
31 |
--------------------------------------------------------------------------------
/app/presence/presence-client.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as Ably from 'ably';
4 | import names from 'random-names-generator'
5 |
6 | import { AblyProvider, ChannelProvider, useAbly, usePresence, usePresenceListener } from "ably/react"
7 | import { useState, ReactElement, FC } from 'react'
8 | import Logger, { LogEntry } from '../../components/logger';
9 | import SampleHeader from '../../components/SampleHeader';
10 |
11 | export default function Presence() {
12 |
13 | const [randomName] = useState(names.random());
14 | const [isOnline, setIsOnline] = useState(false)
15 |
16 | const client = new Ably.Realtime ({ authUrl:'/token', authMethod: 'POST', clientId: randomName });
17 |
18 | function toggleState(val: boolean) {
19 | setIsOnline(val)
20 | }
21 |
22 | return (
23 |
26 |
49 |
27 |
48 |
29 | Presence with Ably allows you to keep track of devices that are
30 | present on a channel. This is great for tracking if a device is
31 | online or offline or indicating if a user is in a chat room when
32 | using Ably for Chat.
33 |
34 | Open this page in another tab
35 |
36 | to see more users enter and leave the presence channel.
37 |
38 | { isOnline ? (
39 |
42 |
46 | ) }
47 |
43 |
44 |
45 |
67 |
82 |
68 |
76 |
69 |
75 | -
70 | {presenceData.map((member) => {
71 | return (
- {member.clientId} ) 72 | })} 73 |
77 |
81 |
78 |
79 |
80 |
22 |
24 |
25 | )
26 | }
27 |
28 | export default PubSub;
29 |
--------------------------------------------------------------------------------
/app/pub-sub/pubsub-client.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as Ably from 'ably';
4 | import { AblyProvider, ChannelProvider, useChannel } from "ably/react"
5 | import { MouseEventHandler, MouseEvent, useState } from 'react'
6 | import Logger, { LogEntry } from '../../components/logger';
7 | import SampleHeader from '../../components/SampleHeader';
8 |
9 | export default function PubSubClient() {
10 |
11 | const client = new Ably.Realtime ({ authUrl: '/token', authMethod: 'POST' });
12 |
13 | return (
14 |
17 |
25 |
18 |
24 |
20 | Publish messages on channels and subscribe to channels to receive messages. Click Publish from Client to publish a message on a channel from the web browser client. Click Publish from Server to publish a message from a serverless function.
21 |
22 |
58 |
75 |
59 | Message text
60 |
61 | setMessageText(e.target.value)} />
62 |
63 |
74 |
64 |
68 |
65 |
66 |
67 |
69 |
73 |
70 |
71 |
72 |
10 |
11 |
16 | )
17 | }
--------------------------------------------------------------------------------
/components/SampleHeader.tsx:
--------------------------------------------------------------------------------
1 | export default function SampleHeader(props: { sampleName:string, sampleIcon:string, sampleDocsLink:string }) {
2 | return (
3 |
12 | {props.menuItemText}
13 |
14 |
15 |
4 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/components/Sidebar.tsx:
--------------------------------------------------------------------------------
1 | import FooterItem from "./FooterItem";
2 | import MenuItem from "./MenuItem";
3 | import SocialItem from "./SocialItem";
4 |
5 | export default function Sidebar(props: { pageId: string; }) {
6 |
7 | const menuItems = [
8 | {
9 | menuItemId: "Start",
10 | menuItemText: "Start",
11 | menuItemActive: false,
12 | menuItemLink: '/'
13 | },
14 | {
15 | menuItemId: "Authentication",
16 | menuItemText: "Authentication",
17 | menuItemActive: false,
18 | menuItemLink: '/authentication'
19 | },
20 | {
21 | menuItemId: "PubSubChannels",
22 | menuItemText: "Pub/Sub Channels",
23 | menuItemActive: false,
24 | menuItemLink: '/pub-sub'
25 | },
26 | {
27 | menuItemId: "Presence",
28 | menuItemText: "Presence",
29 | menuItemActive: false,
30 | menuItemLink: '/presence'
31 | },
32 | {
33 | menuItemId: "History",
34 | menuItemText: "History",
35 | menuItemActive: false,
36 | menuItemLink: '/history'
37 | }
38 | ]
39 |
40 | const footerItems = [
41 | {
42 | menuItemText: "View our Docs",
43 | menuItemLink: 'https://ably.com/docs/'
44 | },
45 | {
46 | menuItemText: "Explore Pub/Sub Channels",
47 | menuItemLink: 'https://ably.com/channels'
48 | },
49 | {
50 | menuItemText: "ably.com",
51 | menuItemLink: 'https://ably.com/'
52 | },
53 | ];
54 |
55 | const socialItems = [
56 | {
57 | menuItemText: "X (Twitter)",
58 | menuItemLink: 'https://twitter.com/ablyrealtime/',
59 | menuItemIcon:
5 |
14 |
6 |
10 |
7 | 
8 |
9 |
11 | {props.sampleName}
12 |
13 |
15 |
16 |
31 |
17 | View docs
18 |
19 |
20 |
21 |
22 |
28 |
29 |
30 |
28 |
85 |
132 | )
133 | }
--------------------------------------------------------------------------------
/components/SocialItem.tsx:
--------------------------------------------------------------------------------
1 |
2 | export default function SocialItem(props : { menuItemIconSource:any, menuItemLink:string, menuItemFillSyles:string }) {
3 | return (
4 |
86 | 
87 |
104 |
87 |
88 | {menuItems.map(
89 | ({
90 | menuItemId,
91 | menuItemText,
92 | menuItemLink
93 | }) => (
94 |
100 | )
101 | )}
102 |
103 |
105 | 
106 |
112 |
131 |
106 |
107 | {footerItems.map(({ menuItemText, menuItemLink }) => (
108 |
111 |
112 |
113 | {socialItems.map(
114 | ({
115 | menuItemText,
116 | menuItemIcon,
117 | menuItemLink,
118 | menuItemFillSyles
119 | }) => (
120 |
130 |
5 |
6 |
9 |
10 |
11 | )
12 | }
13 |
14 |
--------------------------------------------------------------------------------
/components/logger.tsx:
--------------------------------------------------------------------------------
1 | export class LogEntry {
2 | public timestamp: Date
3 | public message: string
4 |
5 | constructor(message: string) {
6 | this.timestamp = new Date()
7 | this.message = message
8 | }
9 | }
10 |
11 | export type LoggingProps = {
12 | logEntries: Array
19 | { displayHeader &&
20 |
51 | )
52 | }
--------------------------------------------------------------------------------
/media/ably-nextjs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ably-labs/ably-nextjs-fundamentals-kit/8f7fead7ea32efc27e99fbd06708cd413f7eea76/media/ably-nextjs.png
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | // disabling strict mode since the examples use
4 | // useEffect with no dependencies to ensure the function
5 | // is only run once and only run on the client.
6 | reactStrictMode: false,
7 | swcMinify: true,
8 | images: {
9 | dangerouslyAllowSVG: true,
10 | domains: ['static.ably.dev'],
11 | },
12 | experimental: {
13 | serverComponentsExternalPackages: ['ably'],
14 | },
15 | };
16 |
17 | module.exports = nextConfig;
18 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ably-nextjs-fundamentals-kit",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "dev:turbo": "next dev --turbo",
8 | "build": "next build",
9 | "start": "next start",
10 | "lint": "next lint"
11 | },
12 | "dependencies": {
13 | "@types/node": "20.6.5",
14 | "@types/react": "18.2.22",
15 | "@types/react-dom": "18.2.7",
16 | "ably": "^2.0.1",
17 | "dotenv": "^16.0.3",
18 | "eslint": "8.50.0",
19 | "flowbite": "^1.8.1",
20 | "flowbite-react": "^0.6.1",
21 | "next": "^14.1.4",
22 | "random-names-generator": "^1.0.2",
23 | "react": "^18.2.0",
24 | "react-dom": "^18.2.0",
25 | "tailwind-scrollbar": "^3.0.5",
26 | "typescript": "5.2.2"
27 | },
28 | "devDependencies": {
29 | "autoprefixer": "^10.4.15",
30 | "eslint-config-next": "^14.1.4",
31 | "eslint-plugin-react-hooks": "^4.6.0",
32 | "postcss": "^8.4.28",
33 | "tailwindcss": "^3.3.3"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/public/ably-logo-col-horiz-rgb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ably-labs/ably-nextjs-fundamentals-kit/8f7fead7ea32efc27e99fbd06708cd413f7eea76/public/ably-logo-col-horiz-rgb.png
--------------------------------------------------------------------------------
/public/ably-logo-col-horiz-rgb.svg:
--------------------------------------------------------------------------------
1 |
24 |
--------------------------------------------------------------------------------
/public/ably-logo-col-inv-horiz-rgb.svg:
--------------------------------------------------------------------------------
1 |
24 |
--------------------------------------------------------------------------------
/public/ably-motif-col-rgb.svg:
--------------------------------------------------------------------------------
1 |
23 |
--------------------------------------------------------------------------------
/public/assets/AblyLogo.svg:
--------------------------------------------------------------------------------
1 |
24 |
--------------------------------------------------------------------------------
/public/assets/AblyLogoWithText.svg:
--------------------------------------------------------------------------------
1 |
24 |
--------------------------------------------------------------------------------
/public/assets/Alert.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/public/assets/ArrowRight.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/assets/Authentication.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/public/assets/DiscordLogo.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/assets/ExploreNow.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/assets/GithubLogo.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/assets/GreenButton.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/assets/History.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/public/assets/HorizontalRule.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/assets/LinkedInLogo.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/assets/NextjsLogo.svg:
--------------------------------------------------------------------------------
1 |
26 |
--------------------------------------------------------------------------------
/public/assets/PlusSign.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/assets/Presence.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/public/assets/PubSubChannels.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/public/assets/RedButton.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/assets/XTwitterLogo.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/assets/YellowButton.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/assets/icon-social-discord-col.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/assets/icon-social-github-col.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/assets/icon-social-linkedin-col.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/assets/icon-social-x-col.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/random-names-generator.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'random-names-generator';
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | "./app/**/*.{js,ts,jsx,tsx,mdx}",
5 | "./pages/**/*.{js,ts,jsx,tsx,mdx}",
6 | "./components/**/*.{js,ts,jsx,tsx,mdx}",
7 |
8 | // Or if using `src` directory:
9 | "./src/**/*.{js,ts,jsx,tsx,mdx}",
10 | ],
11 | theme: {
12 | fontFamily: {
13 | "manrope": "Manrope, sans-serif",
14 | "jetbrains-mono": "'JetBrains Mono', monospace",
15 | },
16 | extend: {
17 | colors: {
18 | 'linkedin':'#1269BF',
19 | 'discord':'#5B64EA'
20 | }
21 | },
22 | },
23 | plugins: [
24 | require('tailwind-scrollbar'),
25 | ],
26 | }
27 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "strict": true,
12 | "forceConsistentCasingInFileNames": true,
13 | "noEmit": true,
14 | "esModuleInterop": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "resolveJsonModule": true,
18 | "isolatedModules": true,
19 | "allowImportingTsExtensions":true,
20 | "jsx": "preserve",
21 | "incremental": true,
22 | "plugins": [
23 | {
24 | "name": "next"
25 | }
26 | ]
27 | },
28 | "include": [
29 | "next-env.d.ts",
30 | "**/*.ts",
31 | "**/*.tsx",
32 | ".next/types/**/*.ts"
33 | , "components/layout.tsx", "pages/pub-sub.old", "pages/index.old", "app/page.tsx.old", "app/pub-sub/pubsub-client.tsx.old" ],
34 | "exclude": [
35 | "node_modules"
36 | ]
37 | }
38 |
--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "framework": "nextjs"
3 | }
--------------------------------------------------------------------------------
21 | Message log
22 |
23 | }
24 |
25 |
50 |
26 |
32 |
33 |
27 | 
28 | 
29 | 
30 |
31 |
28 |
29 |
30 |
34 |
49 |
35 |
48 | -
36 | {
37 | // Show the newest log entry at the top
38 | logEntries.map((logEntry: LogEntry, index: number) => {
39 | return (
40 |
- 41 | {index+1} {logEntry.message} 42 | 43 | )} 44 | ) 45 | } 46 |