1.0.5 • Published 2 months ago
afrochat-ui v1.0.5
AfroChat UI
AfroChat UI is a simple standalone Angular frontend Chatroom user interface intended to get chat running quickly on the client side.
Getting Started
npm install afrochat-ui
Component
import { AfrochatUiComponent, UserInterface } from 'afrochat-ui';
@Component({
selector: 'app-root',
standalone: true,
imports: [ RouterOutlet, AfrochatUiComponent],
providers: [
{ provide: "SERVER_URL", useValue: "http://<chat-server-address>" }
],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
user: UserInterface | undefined;
constructor(){
// Get user or create one
this.http.get("https://randomuser.me/api/").subscribe((data: any) => {
this.user = {
id: Number(crypto.getRandomValues(new BigUint64Array(1))).toString(16),
name: data.results[0].name.first,
img: data.results[0].picture.thumbnail,
isModerator: Math.random() < 0.5
};
});
}
onModeratorEvent(moderatorEvent: ModeratorEventInterface) {
//handle moderator event on client side
}
}
Template
@if(user){
<afrochat-ui [user]="user" [room]="'myChatRoom'" (onModeratorEvent)="onModeratorEvent($event)" style="height:100vh;width:100vw;display:flex;"></afrochat-ui>
}
Events
Outgoing
Event Flag | Payload | Description |
---|---|---|
JOIN_ROOM | {room: string, user, reconnecting: boolean} | Fired when component is initialized |
NEW_MESSAGE | message | Send a message from user to the server |
REMOVE_MESSAGE | message | Fired when 'Remove' menu item is clicked |
TIMEOUT_USER | user | Fired when 'Timeout' menu item is clicked |
BAN_USER | user | Fired when 'Ban' menu item is clicked |
LEAVE_ROOM | {room: string, user} | Not implemented |
Incoming
Event Flag | Payload | Description |
---|---|---|
NEW_SYSTEM_MESSAGE | message | Receive an informative message to display to users |
NEW_USER_MESSAGE | message | Receive a chat message from a specific user to display in chatroom |
ROOM_UPDATE | room | Received as users join and leave chat |
Payloads
//user
UserInterface{
id: string,
name: string,
img: string,
room?: string
isModerator?: boolean
socketID?: string,
connectedAt?: number
}
//message
MessageInterface{
type: 'user' | 'system',
message: string,
id?: string,
user?: UserInterface
room?: string
img?: string
time?: number
}
//room
RoomInterface{
name: string,
users: UserInterface[]
}
//moderatorEvent
ModeratorEventInterface{
event: 'TIMEOUT_USER' | 'BAN_USER' | 'REMOVE_MESSAGE',
payload: UserInterface | MessageInterface
}