Skip to content

Commit e0e6090

Browse files
VeskeRVeskeR
committed
Change code to use ably-js v2
1 parent 0628fbb commit e0e6090

File tree

6 files changed

+85
-78
lines changed

6 files changed

+85
-78
lines changed

‎app/authentication/authentication-client.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { AblyProvider, useAbly, useConnectionStateListener } from 'ably/react'
1010

1111
export default function Authentication() {
1212

13-
const client = new Ably.Realtime.Promise ({ authUrl: '/token', authMethod: 'POST' });
13+
const client = new Ably.Realtime({ authUrl: '/token', authMethod: 'POST' });
1414

1515
return (
1616
<AblyProvider client={ client }>

‎app/history/history-client.tsx‎

Lines changed: 40 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,54 +2,56 @@
22

33
import * as Ably from 'ably';
44

5-
import { AblyProvider, useChannel } from "ably/react"
5+
import { AblyProvider, ChannelProvider, useChannel } from "ably/react"
66
import { useState, useEffect } from 'react'
77
import Logger, { LogEntry } from '../../components/logger';
88
import SampleHeader from '../../components/SampleHeader';
99

1010
export default function Presence() {
1111

12-
const client = new Ably.Realtime.Promise ({ authUrl:'/token', authMethod: 'POST' });
12+
const client = new Ably.Realtime ({ authUrl:'/token', authMethod: 'POST' });
1313

1414
return (
1515
<AblyProvider client={ client }>
16-
<div className="flex flex-row justify-center">
17-
<div className="flex flex-col justify-start items-start gap-10 h-[172px]">
18-
<div className="flex flex-col justify-start items-start gap-4">
19-
<SampleHeader sampleName="History" sampleIcon="History.svg" sampleDocsLink="https://ably.com/docs/storage-history/history?lang=javascript" />
20-
<div className="font-manrope text-base max-w-screen-sm text-slate-800 text-opacity-100 leading-6 font-light">
21-
Retrieve a history of messages that have been published to a channel.
22-
Messages are only stored for 2 minutes by default. In order for them
23-
to be stored for longer you should enable the&nbsp;
24-
<span className="text-xs font-jetbrains-mono font-medium bg-slate-200 p-1">
25-
Persist all messages
26-
</span>&nbsp;
27-
<a href="https://ably.com/docs/channels?lang=javascript#rules" target="blank"><span className="text-sky-600 text-opacity-100">channel rule</span></a>
28-
<span className="text-black text-opacity-100">&nbsp;</span>for
29-
the&nbsp;
30-
<span className="text-xs font-jetbrains-mono font-medium bg-slate-200 p-1">
31-
status-updates
32-
</span>
33-
&nbsp;channel in your Ably app &nbsp;
16+
<ChannelProvider channelName="status-updates">
17+
<div className="flex flex-row justify-center">
18+
<div className="flex flex-col justify-start items-start gap-10 h-[172px]">
19+
<div className="flex flex-col justify-start items-start gap-4">
20+
<SampleHeader sampleName="History" sampleIcon="History.svg" sampleDocsLink="https://ably.com/docs/storage-history/history?lang=javascript" />
21+
<div className="font-manrope text-base max-w-screen-sm text-slate-800 text-opacity-100 leading-6 font-light">
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&nbsp;
25+
<span className="text-xs font-jetbrains-mono font-medium bg-slate-200 p-1">
26+
Persist all messages
27+
</span>&nbsp;
28+
<a href="https://ably.com/docs/channels?lang=javascript#rules" target="blank"><span className="text-sky-600 text-opacity-100">channel rule</span></a>
29+
<span className="text-black text-opacity-100">&nbsp;</span>for
30+
the&nbsp;
31+
<span className="text-xs font-jetbrains-mono font-medium bg-slate-200 p-1">
32+
status-updates
33+
</span>
34+
&nbsp;channel in your Ably app &nbsp;
35+
</div>
3436
</div>
35-
</div>
36-
<div className="flex flex-row justify-start items-start gap-4 pt-4 pr-4 pb-4 pl-4 rounded-lg border-slate-200 border-t border-b border-l border-r border-solid border w-[480px] h-[72px] bg-white">
37-
<div className="flex flex-col justify-center items-center h-5">
38-
<img width="24px" height="22px" src="/assets/Alert.svg" alt="Alert" />
39-
</div>
40-
<div className="font-manrope text-sm text-gray-500 text-opacity-100 leading-5 font-light">
41-
<span className="font-medium">Important:&nbsp;</span>You need to
42-
publish at least 1 message from the&nbsp;
43-
<a href="/pub-sub" target="_blank"><span className="text-sky-600 text-opacity-100">
44-
Pub/Sub Channels example
45-
</span></a>
46-
&nbsp;to see history log.
37+
<div className="flex flex-row justify-start items-start gap-4 pt-4 pr-4 pb-4 pl-4 rounded-lg border-slate-200 border-t border-b border-l border-r border-solid border w-[480px] h-[72px] bg-white">
38+
<div className="flex flex-col justify-center items-center h-5">
39+
<img width="24px" height="22px" src="/assets/Alert.svg" alt="Alert" />
40+
</div>
41+
<div className="font-manrope text-sm text-gray-500 text-opacity-100 leading-5 font-light">
42+
<span className="font-medium">Important:&nbsp;</span>You need to
43+
publish at least 1 message from the&nbsp;
44+
<a href="/pub-sub" target="_blank"><span className="text-sky-600 text-opacity-100">
45+
Pub/Sub Channels example
46+
</span></a>
47+
&nbsp;to see history log.
48+
</div>
49+
4750
</div>
48-
51+
<HistoryMessages />
4952
</div>
50-
<HistoryMessages />
5153
</div>
52-
</div>
54+
</ChannelProvider>
5355
</AblyProvider>
5456
)
5557
}
@@ -59,19 +61,19 @@ function HistoryMessages() {
5961
const [realtimeLogs, setRealtimeLogs] = useState<Array<LogEntry>>([])
6062
const [historicalLogs, setHistoricalLogs] = useState<Array<LogEntry>>([])
6163

62-
const { channel } = useChannel("status-updates", (message: Ably.Types.Message) => {
64+
const { channel } = useChannel("status-updates", (message: Ably.Message) => {
6365
console.log(message);
6466
setRealtimeLogs(prev => [...prev, new LogEntry(`✉️ event name: ${message.name} text: ${message.data.text}`)])
6567
});
6668

6769
useEffect(() => {
6870
const getHistory = async () => {
69-
let history: Ably.Types.PaginatedResult<Ably.Types.Message> = await channel.history()
71+
let history: Ably.PaginatedResult<Ably.Message> | null = await channel.history()
7072
do {
7173
history.items.forEach(message => {
7274
setHistoricalLogs(prev => [
7375
...prev,
74-
new LogEntry(`"${message.data.text}" sent at ${new Date(message.timestamp).toISOString()}`)
76+
new LogEntry(`"${message.data.text}" sent at ${new Date(message.timestamp!).toISOString()}`)
7577
])
7678
})
7779
history = await history.next()

‎app/presence/presence-client.tsx‎

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import * as Ably from 'ably';
44
import names from 'random-names-generator'
55

6-
import { AblyProvider, useAbly, usePresence } from "ably/react"
6+
import { AblyProvider, ChannelProvider, useAbly, usePresence, usePresenceListener } from "ably/react"
77
import { useState, ReactElement, FC } from 'react'
88
import Logger, { LogEntry } from '../../components/logger';
99
import SampleHeader from '../../components/SampleHeader';
@@ -13,38 +13,40 @@ export default function Presence() {
1313
const [randomName] = useState(names.random());
1414
const [isOnline, setIsOnline] = useState(false)
1515

16-
const client = new Ably.Realtime.Promise ({ authUrl:'/token', authMethod: 'POST', clientId: randomName });
16+
const client = new Ably.Realtime ({ authUrl:'/token', authMethod: 'POST', clientId: randomName });
1717

1818
function toggleState(val: boolean) {
1919
setIsOnline(val)
2020
}
2121

2222
return (
2323
<AblyProvider client={ client }>
24-
<div className="flex flex-row justify-center">
25-
<div className="flex flex-col justify-start items-start gap-10">
26-
<SampleHeader sampleName="Presence" sampleIcon="Presence.svg" sampleDocsLink="https://ably.com/docs/getting-started/react#usePresence" />
27-
<div className="font-manrope text-base max-w-screen-sm text-slate-800 text-opacity-100 leading-6 font-light">
28-
Presence with Ably allows you to keep track of devices that are
29-
present on a channel. This is great for tracking if a device is
30-
online or offline or indicating if a user is in a chat room when
31-
using Ably for Chat.&nbsp;
32-
<a href="" target="_blank"><span className="text-sky-600 text-opacity-100">
33-
Open this page in another tab
34-
</span></a>
35-
&nbsp;to see more users enter and leave the presence channel.
36-
</div>
37-
{ isOnline ? (
38-
<PresenceMessages toggle={toggleState} />
39-
) : (
40-
<div className="flex justify-center items-center rounded-md w-[120px] h-10 bg-black">
41-
<div className="font-manrope text-base min-w-[80px] whitespace-nowrap text-white text-opacity-100 text-center leading-4 font-medium">
42-
<button onClick={() => setIsOnline(true)}>Join</button>
43-
</div>
24+
<ChannelProvider channelName="room">
25+
<div className="flex flex-row justify-center">
26+
<div className="flex flex-col justify-start items-start gap-10">
27+
<SampleHeader sampleName="Presence" sampleIcon="Presence.svg" sampleDocsLink="https://ably.com/docs/getting-started/react#usePresence" />
28+
<div className="font-manrope text-base max-w-screen-sm text-slate-800 text-opacity-100 leading-6 font-light">
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.&nbsp;
33+
<a href="" target="_blank"><span className="text-sky-600 text-opacity-100">
34+
Open this page in another tab
35+
</span></a>
36+
&nbsp;to see more users enter and leave the presence channel.
4437
</div>
45-
) }
38+
{ isOnline ? (
39+
<PresenceMessages toggle={toggleState} />
40+
) : (
41+
<div className="flex justify-center items-center rounded-md w-[120px] h-10 bg-black">
42+
<div className="font-manrope text-base min-w-[80px] whitespace-nowrap text-white text-opacity-100 text-center leading-4 font-medium">
43+
<button onClick={() => setIsOnline(true)}>Join</button>
44+
</div>
45+
</div>
46+
) }
47+
</div>
4648
</div>
47-
</div>
49+
</ChannelProvider>
4850
</AblyProvider>
4951
)
5052
}
@@ -54,7 +56,8 @@ const PresenceMessages: FC<any> = ({toggle}): ReactElement => {
5456
const [logs, setLogs] = useState<Array<LogEntry>>([])
5557
const client = useAbly();
5658

57-
const { presenceData, updateStatus } = usePresence("room", {'status':'available'}, (member) => {
59+
const { updateStatus } = usePresence("room", {'status':'available'}, );
60+
const { presenceData } = usePresenceListener("room", (member) => {
5861
setLogs(prev => [...prev, new LogEntry(`action: ${member.action} clientId: ${member.clientId}`)])
5962
});
6063

‎app/pub-sub/pubsub-client.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
11
'use client'
22

33
import * as Ably from 'ably';
4-
import { AblyProvider, useChannel } from "ably/react"
4+
import { AblyProvider, ChannelProvider, useChannel } from "ably/react"
55
import { MouseEventHandler, MouseEvent, useState } from 'react'
66
import Logger, { LogEntry } from '../../components/logger';
77
import SampleHeader from '../../components/SampleHeader';
88

99
export default function PubSubClient() {
1010

11-
const client = new Ably.Realtime.Promise ({ authUrl: '/token', authMethod: 'POST' });
11+
const client = new Ably.Realtime ({ authUrl: '/token', authMethod: 'POST' });
1212

1313
return (
1414
<AblyProvider client={ client }>
15-
<div className="flex flex-row justify-center">
16-
<div className="flex flex-col justify-start items-start gap-10">
17-
<SampleHeader sampleName="Pub/Sub Channels" sampleIcon="PubSubChannels.svg" sampleDocsLink="https://ably.com/docs/getting-started/react#useChannel" />
18-
<div className="font-manrope text-base max-w-screen-sm text-slate-800 text-opacity-100 leading-6 font-light">
19-
Publish messages on channels and subscribe to channels to receive messages. Click&nbsp;<span className="font-medium">Publish from Client</span>&nbsp;to publish a message on a channel from the web browser client. Click&nbsp;<span className="font-medium">Publish from Server</span>&nbsp;to publish a message from a serverless function.
20-
</div>
21-
<PubSubMessages />
22-
</div>
23-
</div>
15+
<ChannelProvider channelName="status-updates">
16+
<div className="flex flex-row justify-center">
17+
<div className="flex flex-col justify-start items-start gap-10">
18+
<SampleHeader sampleName="Pub/Sub Channels" sampleIcon="PubSubChannels.svg" sampleDocsLink="https://ably.com/docs/getting-started/react#useChannel" />
19+
<div className="font-manrope text-base max-w-screen-sm text-slate-800 text-opacity-100 leading-6 font-light">
20+
Publish messages on channels and subscribe to channels to receive messages. Click&nbsp;<span className="font-medium">Publish from Client</span>&nbsp;to publish a message on a channel from the web browser client. Click&nbsp;<span className="font-medium">Publish from Server</span>&nbsp;to publish a message from a serverless function.
21+
</div>
22+
<PubSubMessages />
23+
</div>
24+
</div>
25+
</ChannelProvider>
2426
</AblyProvider>
2527
)
2628
}
@@ -29,7 +31,7 @@ function PubSubMessages() {
2931

3032
const [logs, setLogs] = useState<Array<LogEntry>>([])
3133

32-
const { channel } = useChannel("status-updates", (message: Ably.Types.Message) => {
34+
const { channel } = useChannel("status-updates", (message: Ably.Message) => {
3335
setLogs(prev => [...prev, new LogEntry(`✉️ event name: ${message.name} text: ${message.data.text}`)])
3436
});
3537

‎app/publish/route.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { NextRequest, NextResponse } from 'next/server'
2-
import * as Ably from "ably/promises"
2+
import * as Ably from "ably"
33

44
export async function POST(req: Request) {
55
if (!process.env.ABLY_API_KEY) {

‎app/token/route.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { NextRequest, NextResponse } from 'next/server'
2-
import * as Ably from "ably/promises";
2+
import * as Ably from "ably";
33

44
export async function POST(req: Request) {
55
if (!process.env.ABLY_API_KEY) {

0 commit comments

Comments
 (0)