72 lines
1.7 KiB
TypeScript
72 lines
1.7 KiB
TypeScript
|
"use client";
|
||
|
|
import { useState, useEffect, useCallback } from "react";
|
||
|
|
import useWebSocket, { ReadyState } from "react-use-websocket";
|
||
|
|
import MessageDispatcher from "./message";
|
||
|
|
import { Token } from "@/lib/types";
|
||
|
|
|
||
|
|
const MOMO_IM_URL = "wss://live-ws.immomo.com/ws/im";
|
||
|
|
|
||
|
|
export const Danmu: React.FC<{ token: Token }> = ({ token }) => {
|
||
|
|
const [messageHistory, setMessageHistory] = useState<MessageEvent<any>[]>([]);
|
||
|
|
|
||
|
|
const { sendMessage, lastMessage, readyState } = useWebSocket(MOMO_IM_URL, {
|
||
|
|
heartbeat: {
|
||
|
|
message: () => {
|
||
|
|
const pingMessage = {
|
||
|
|
msg_id: 2,
|
||
|
|
client_time: Date.now(),
|
||
|
|
type: "Ping",
|
||
|
|
data: {},
|
||
|
|
};
|
||
|
|
return JSON.stringify(pingMessage);
|
||
|
|
},
|
||
|
|
interval: 5000,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const momoId = token.uid;
|
||
|
|
const roomId = "1476810196216";
|
||
|
|
const momoToken = token.token;
|
||
|
|
|
||
|
|
const clientTime = Date.now();
|
||
|
|
const data = {
|
||
|
|
msg_id: 1,
|
||
|
|
client_time: clientTime,
|
||
|
|
type: "Sauth",
|
||
|
|
data: {
|
||
|
|
momoid: momoId,
|
||
|
|
roomid: roomId,
|
||
|
|
role: 6,
|
||
|
|
isVisitor: false,
|
||
|
|
token: momoToken,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (ReadyState.OPEN === readyState) {
|
||
|
|
sendMessage(JSON.stringify(data));
|
||
|
|
}
|
||
|
|
}, [readyState]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (lastMessage !== null) {
|
||
|
|
if (lastMessage.data) {
|
||
|
|
const message = JSON.parse(lastMessage.data);
|
||
|
|
if (message.type === "pong") {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
console.log(message);
|
||
|
|
setMessageHistory((prev) => prev.concat(message));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, [lastMessage]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="h-[50vh] overflow-auto">
|
||
|
|
{messageHistory.map((message, idx) => (
|
||
|
|
<MessageDispatcher key={idx} message={message} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|