This repository stores code for the following DevExpress tutorial: Getting Started with DevExtreme Chat. The project creates an interactive interface that allows users to send and receive messages in real time.
Files to Review
- jQuery
- Angular
- Vue
- React
Documentation
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
jQuery/src/index.js
JavaScriptconst firstUser = {
id: "1",
name: "User"
};
const secondUser = {
id: "2",
name: "Feedback Bot",
avatarUrl: "./bot.png"
};
const initialMessages = [{
timestamp: Date.now(),
author: secondUser,
text: `Hello! We'd love to hear your feedback. Please share your thoughts below!`
}];
const alert = [{
id: 1,
message: "Session expired"
}];
$(() => {
function sendToBackend() {
setTimeout(() => {
chat.option("typingUsers", []);
chat.renderMessage({
text: "Thanks for helping us improve!",
author: secondUser,
timestamp: Date.now()
});
chat.option("alerts", alert);
chat.option("disabled", true);
}, 1000);
}
const chat = $("#chat")
.dxChat({
width: 400,
height: 450,
user: firstUser,
onMessageEntered: ({ component, message }) => {
component.renderMessage(message);
chat.option("typingUsers", [secondUser]);
sendToBackend();
},
items: initialMessages
})
.dxChat("instance");
});
Angular/src/app/app.component.html
HTML<dx-chat
[disabled]="disabled"
[width]="400"
[height]="450"
[user]="firstUser"
[items]="messages"
[typingUsers]="typingUsers"
(onMessageEntered)="onMessageEntered($event)"
[alerts]="alerts"
>
</dx-chat>
Angular/src/app/app.component.ts
TypeScriptimport { Component } from '@angular/core';
import { DxChatTypes } from "devextreme-angular/ui/chat";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
firstUser: DxChatTypes.User = {
id: "1",
name: "User",
};
secondUser: DxChatTypes.User = {
id: "2",
name: "ChatBack",
avatarUrl: "./bot.png",
};
messages: DxChatTypes.Message[] = [
{
timestamp: Date.now(),
author: this.secondUser,
text: `Hello! We'd love to hear your feedback. Please share your thoughts below!`,
},
];
alerts: DxChatTypes.Alert[] = [];
typingUsers: DxChatTypes.User[] = [];
disabled: boolean = false;
onMessageEntered({ message }) {
this.messages = [...this.messages, message];
this.typingUsers = [this.secondUser];
this.sendToBackend();
}
sendToBackend() {
setTimeout(() => {
this.typingUsers = [];
this.messages = [
...this.messages,
{
text: "Thanks for helping us improve!",
author: this.secondUser,
timestamp: Date.now(),
},
];
this.alerts = [
...this.alerts,
{
id: 1,
message: "Session expired",
},
];
this.disabled = true;
}, 1000);
}
}
Vue/src/components/HomeContent.vue
Code<template>
<DxChat
width="400"
height="450"
:disabled="disabled"
:alerts="alerts"
:user="firstUser"
:items="messages"
:typingUsers="typingUsers"
@message-entered="onMessageEntered"
/>
</template>
<script setup>
import { ref } from "vue";
import DxChat from "devextreme-vue/chat";
const firstUser = {
id: "1",
name: "User"
};
const secondUser = {
id: "2",
name: "Feedback Bot",
avatarUrl: "./bot.png"
};
const initialMessages = [{
timestamp: Date.now(),
author: secondUser,
text: `Hello! We'd love to hear your feedback. Please share your thoughts below!`
}];
const messages = ref(initialMessages);
const typingUsers = ref([]);
const alerts = ref([]);
const disabled = ref(false);
const onMessageEntered = ({ message }) => {
messages.value = [...messages.value, message];
typingUsers.value = [secondUser];
sendToBackend();
};
const sendToBackend = () => {
setTimeout(() => {
typingUsers.value = [];
messages.value = [
...messages.value,
{
text: "Thanks for helping us improve!",
author: secondUser,
timestamp: Date.now(),
},
];
alerts.value = [
...alerts.value,
{
id: 1,
message: "Session expired",
},
];
disabled.value = true;
}, 1000);
};
</script>
React/src/App.js
JavaScriptimport React, { useCallback, useState } from "react";
import Chat from "devextreme-react/chat";
const firstUser = {
id: "1",
name: "User"
};
const secondUser = {
id: "2",
name: "Feedback Bot",
avatarUrl: "./bot.png"
};
const initialMessages = [{
timestamp: Date.now(),
author: secondUser,
text: `Hello! We'd love to hear your feedback. Please share your thoughts below!`
}];
const App = () => {
const [messages, setMessages] = useState(initialMessages);
const [typingUsers, setTypingUsers] = useState([]);
const [alerts, setAlerts] = useState([]);
const [disabled, setDisabled] = useState(false);
const onMessageEntered = useCallback(({ message }) => {
setMessages((prevMessages) => [...prevMessages, message]);
setTypingUsers([secondUser]);
sendToBackend();
}, []);
const sendToBackend = () => {
setTimeout(() => {
setTypingUsers([]);
setMessages((prevMessages) => [
...prevMessages,
{
text: "Thanks for helping us improve!",
author: secondUser,
timestamp: Date.now(),
},
]);
setAlerts([
{
id: 1,
message: "Session expired",
},
]);
setDisabled(true);
}, 3000);
};
return (
<Chat
disabled={disabled}
alerts={alerts}
width={400}
height={450}
user={firstUser}
onMessageEntered={onMessageEntered}
items={messages}
typingUsers={typingUsers}
/>
);
};
export default App;