TmChat
This is chat system for bazar.com.tm
Note
This chat system works like a group chat (in code chat room). One chat room includes one or many users. This is not person to person chat. This is group chat. But if chat room has 2 person it will work like person to person chat. Everytime user click the chat, chat system will create new chat room.
Installation
Only one package installation required
npm install tm-chatOr with yarn
yarn add tm-chatUsage
import TmChat first
import TmChat from "tm-chat";Create chat variable with TmChat class:
const chat = new TmChat({
url: "https://chat.bazar.com.tm", // or any host, this is chat backend host address
uuid: window.localStorage.getItem("uuid"), // this is user uuid
});Connect chat socket with events:
function startChat() {
chat.connect({
onConnect: (id) => {
initChat(id);
},
onDisconnect: (id) => {
console.log(id);
},
onNewMessage: (args) => {
console.log("onNewMessage", chat.chats, args);
},
onChatRoomCreated: (room) => {
if (room !== null) {
console.log("onChatRoomCreated", room);
}
},
onMarkAsRead: (ids) => {
console.log("onMarkAsRead", ids);
},
onInviteToRoom: (args) => {
console.log("onInviteToRoom", args);
},
});
}After startChat(), create initChat function:
function initChat(id) {
console.log("initChat", chat.socketId);
chat
.initChat({
socket_id: chat.socketId,
username: username,
password: password,
shop_slug: shopSlug,
phone_number: phone,
email: email,
firstname: firstName,
lastname: lastName,
uuid: uuid,
})
.then((result) => {
window.localStorage.setItem("uuid", result.body.user.uuid);
console.log(chat.user.image);
})
.catch((err) => {
console.log(err);
});
}Let's send text message:
// This method has 2 paramaters, (text message, front end location)
chat
.sendMessage(msg, window.location.pathname)
.then((response) => {
console.log("sent message", response);
})
.catch((err) => {
console.log("error sending message", err);
// alert(err);
});Send text message to specific chat room:
// this method for only moderators and admin
chat
.sendMessageToRoom(chatRoomUUID, textMessage, window.location.pathname)
.then((response) => {
console.log("sent message", response);
})
.catch((err) => {
console.log("error sending message", err);
// alert(err);
});Send image message:
chat
.sendImageMessage(file, window.location.pathname)
.then((response) => {
console.log("sent image message", response);
})
.catch((err) => {
alert(err);
});Send image message to specific chat room:
chat
.sendImageToRoom(roomUUID, file, window.location.pathname)
.then((response) => {
console.log("sent image message", response);
})
.catch((err) => {
alert(err);
});Get list of specific chat room messages:
chat.getChatRoomMessages(roomUUID).then((response) => {
console.log(response);
});List of other chat methods:
inviteChatRoom(chatRoomUUID:string, userId: number)
getChatRoomDetails(chatRoomUUID: string)
leaveChatRoom(roomId: string)
getImageFullUrl(image: string)List of chat class properties:
chat.fetcher; // this axios instance for only chat requets
chat.realtime; // this is socket io client
chat.socketId; // this is your socket id on server side
chat.userId; // this is your id as number
chat.user; // this is your all profile information
chat.chats; // this message list for all chat rooms
chat.room; // this your current chat room, this property commonly use for simple users
chat.rooms; // this is your chat rooms history, this property use for moderators and admin, because this users can see old chat roomsList of chat models:
// To create user
interface UserInfo {
username: string;
password: string;
socket_id: string;
shop_slug?: string;
uuid?: string;
firstname?: string;
lastname?: string;
phone_number?: string;
email?: string;
description?: string;
front_id?: string;
}
// chat events
interface IEvents {
onConnect: (socketId: string) => void;
onDisconnect: (socketId: string) => void;
onNewMessage: (args: any) => void;
onChatRoomCreated: (args: any) => void;
onMarkAsRead: (args: any) => void;
onInviteToRoom: (args: any) => void;
}
// single message
interface IMessage {
users: string[];
message: string;
mime_type: MimeType;
user_id: number;
front_path: string;
to_id: number;
reply_id: number;
click_url: string;
message_size: string;
message_duration: string;
status: string;
uuid: string;
chat_room_uuid: string;
username: string;
avatar: string;
created_at: Date;
}
// initChat function response
interface InitChatResponse {
user: User;
chatRoom: ChatRoom;
sendMessage: SendMessage;
oldRooms: ChatRoom[];
}
// chat room model
interface ChatRoom {
id: string;
title: string;
image: string;
user_id: string;
created_at: Date;
updated_at: Date;
shop_slug: string;
is_used: boolean;
uuid: string;
users: User[];
}
interface SendMessage {
message: string;
}
// created user model
interface User {
id: string;
firstname: string;
lastname: string;
username: string;
password: string;
phone_number: string;
email: string;
image: string;
uuid: string;
usertype: string;
created_at: Date;
updated_at: Date;
description: string;
sell_point_uuid: null;
is_deleted: boolean;
front_id: string;
}