Chat
TsgcHTMLComponent_Chat — Delphi, C++ Builder 및 .NET에서 텍스트, 이미지, 파일, 오디오 및 비디오 메시지, 읽음 확인, 답장 및 날짜 구분선을 갖춘 WhatsApp 스타일 메신저입니다.
TsgcHTMLComponent_Chat — Delphi, C++ Builder 및 .NET에서 텍스트, 이미지, 파일, 오디오 및 비디오 메시지, 읽음 확인, 답장 및 날짜 구분선을 갖춘 WhatsApp 스타일 메신저입니다.
범위 지정 CSS와 메신저 마크업을 내보내는 완전한 채팅 표면입니다: 아바타가 있는 헤더, 그룹화된 말풍선, 상태 체크 표시, 미디어 첨부 및 작성기. 메시지를 추가하고, 헤더를 설정한 다음, HTML 속성을 읽습니다.
헤더(Title, Subtitle, HeaderAvatarInitials)를 설정하고, 텍스트, 이미지 및 파일 메시지를 추가하고, OnSendMessage를 처리한 다음, HTML을 읽습니다.
uses
sgcHTML_Enums, sgcHTML_Component_Chat;
var
oChat: TsgcHTMLComponent_Chat;
begin
oChat := TsgcHTMLComponent_Chat.Create(nil);
try
oChat.Title := 'Alice Johnson';
oChat.Subtitle := 'online';
oChat.HeaderAvatarInitials := 'AJ';
oChat.Height := '500px';
oChat.ShowTypingIndicator := True;
oChat.OnSendMessage := DoSendMessage; // browser -> your code
oChat.AddSystemMessage('Today');
oChat.AddMessage('Alice', 'Hey! Did you get the file?', maLeft);
oChat.AddImageMessage('You', '/img/receipt.png', maRight,
hcPrimary, 'Here it is');
oChat.AddFileMessage('You', '/files/report.pdf',
'report.pdf', '248 KB', maRight);
WebModule.Response := oChat.HTML; // messenger markup + scoped CSS
finally
oChat.Free;
end;
end;
// OnSendMessage fires when the visitor submits the composer:
procedure TForm1.DoSendMessage(Sender: TObject; const aMessage: string);
begin
oChat.AddMessage('You', aMessage, maRight, hcPrimary);
WebSocket.WriteData(oChat.GetLastMessageHTML);
end;// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Chat.hpp
TsgcHTMLComponent_Chat *oChat = new TsgcHTMLComponent_Chat(NULL);
try
{
oChat->Title = "Alice Johnson";
oChat->Subtitle = "online";
oChat->HeaderAvatarInitials = "AJ";
oChat->Height = "500px";
oChat->ShowTypingIndicator = true;
oChat->OnSendMessage = DoSendMessage; // browser -> your code
oChat->AddSystemMessage("Today");
oChat->AddMessage("Alice", "Hey! Did you get the file?", maLeft);
oChat->AddImageMessage("You", "/img/receipt.png", maRight,
hcPrimary, "Here it is");
oChat->AddFileMessage("You", "/files/report.pdf",
"report.pdf", "248 KB", maRight);
String html = oChat->HTML; // messenger markup + scoped CSS
}
__finally
{
delete oChat;
}using esegece.sgcWebSockets;
var chat = new TsgcHTMLComponent_Chat();
chat.Title = "Alice Johnson";
chat.Subtitle = "online";
chat.HeaderAvatarInitials = "AJ";
chat.Height = "500px";
chat.ShowTypingIndicator = true;
chat.OnSendMessage += (sender, message) => // browser -> your code
{
chat.AddMessage("You", message, TsgcHTMLChatMessageAlign.maRight, TsgcHTMLColor.hcPrimary);
};
chat.AddSystemMessage("Today");
chat.AddMessage("Alice", "Hey! Did you get the file?", TsgcHTMLChatMessageAlign.maLeft);
chat.AddImageMessage("You", "/img/receipt.png", TsgcHTMLChatMessageAlign.maRight,
TsgcHTMLColor.hcPrimary, "Here it is");
chat.AddFileMessage("You", "/files/report.pdf",
"report.pdf", "248 KB", TsgcHTMLChatMessageAlign.maRight);
string html = chat.HTML; // messenger markup + scoped CSS가장 자주 사용하게 되는 멤버.
Messages는 TsgcHTMLChat_Messages 컬렉션입니다. 각 TsgcHTMLChat_Message는 Text, MessageType(text/image/file/audio/video/system), Status, ReplyToSender/ReplyToText 및 IsForwarded를 담습니다.
AddMessage, AddImageMessage, AddFileMessage 및 AddSystemMessage(...)는 말풍선을 추가합니다. maLeft/maRight가 측면을 선택합니다.
Title, Subtitle, HeaderAvatarURL 및 HeaderAvatarInitials가 대화 헤더를 구성합니다("online" 부제목은 녹색 점을 추가합니다).
ShowInput, InputPlaceholder, ShowAttachButton, ShowEmojiButton, ShowTypingIndicator 및 TypingText가 하단 바를 조정합니다.
Options(TsgcHTMLChat_Options)는 MaxBubbleWidth, 말풍선/배경 색상, ShowTimestamp, ShowStatus, GroupConsecutive 및 ShowDateSeparators를 설정합니다.
OnSendMessage는 방문자가 작성기를 전송할 때 발생합니다. OnMediaClick은 미디어를 탭할 때 발생합니다. HTML은 채팅을 반환하고, GetLastMessageHTML은 실시간 푸시를 위해 가장 최신 말풍선만 반환합니다.