Basic events not working with Presence Channels, Next JS 14
Opened this issue · 0 comments
Lezlus commented
Basic events such as subscripttion_succeeded are not triggering after subscribing to a presence channel even after successful user authorization.
Here is my pusher.ts file
import Pusher from "pusher";
import pusherJs from "pusher-js";
export const pusherServer = new Pusher({
appId: process.env.PUSHER_APP_ID!,
key: process.env.NEXT_PUBLIC_PUSHER_APP_KEY!,
secret: process.env.PUSHER_APP_SECRET!,
cluster: "us2",
useTLS: true,
});
export const pusherClient = new pusherJs(process.env.NEXT_PUBLIC_PUSHER_APP_KEY!, {
cluster: 'us2',
authEndpoint: "api/pusher/auth",
});
Here is my api/pusher/auth which returns a 200 response code
export async function POST(req: Request) {
const body = await req.text();
const params = new URLSearchParams(body);
const socket_id = params.get("socket_id")!;
const channel_name = params.get("channel_name")!;
console.log(socket_id, channel_name);
try {
const session = await getServerSession(authOptions);
if (session) {
if (session.user) {
// Authenticated by knowing user is in our DB
const user = validateUsersSchema(session.user);
console.log(user);
const auth = pusherServer.authorizeChannel(socket_id, channel_name, {
user_id: user.id,
user_info: {
username: user.name,
activityStatus: user.activityStatus,
online: user.online
}
})
console.log(auth);
return NextResponse.json({ auth });
}
} else {
return NextResponse.json({success: false}, { status: 404 });
}
} catch (err) {
console.log(err);
return NextResponse.json({ err }, { status: 500 });
}
}
When I console.log(auth) I get
{
channel_data: '{"user_id":"66b1771683f79688fd09e509","user_info":{"username":"RafaelB","activityStatus":"ONLINE","online":true}}',
auth: 'e63f526933f87ce4309e:ad9606df3777e20c742a049fbe62e0a872bee7d25b7c095138dfbc9f7a48965f'
}
Here is my React code
useEffect(() => {
if (session?.user) {
const user = validateUsersSchema(session?.user);
setUser(user);
const presenceChannel = pusherClient.subscribe("presence-channel")
const presenceChannelSubscription = (members: PresenceChannelData) => {
console.log("New User in presence-channel");
}
presenceChannel.bind("pusher:subscription_succeeded", presenceChannelSubscription)
I have public channels that I subscribed too as well in this useEffect and they run normally