JavaScript/jQuery Chat - Getting Started
Chat is a UI component that allows users to send and receive messages in real time.
This tutorial shows how to add Chat to the page and configure the component's core settings.
Each section in this tutorial describes a single configuration step. You can also find the full source code in the following GitHub repository:
Create a Chat
Add DevExtreme to your jQuery application and use the following code to create a Chat component:
- $(function() {
- $("#chat").dxChat({ });
- });
- <html>
- <head>
- <!-- ... -->
- <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
- <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css">
- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.2.3/js/dx.all.js"></script>
- <script type="text/javascript" src="index.js"></script>
- </head>
- <body>
- <div id="chat"></div>
- </body>
- </html>
To limit the Chat size, use the width and height properties:
- $(function() {
- $("#chat").dxChat({
- width: 400,
- height: 450,
- });
- });
Render Sent Messages
When a user enters a message in the Chat, the messageEntered event is raised. You can use this event handler to render the message you entered.
In jQuery, the primary way to render a message is to call the renderMessage method:
- $(function() {
- $("#chat").dxChat({
- // ...
- onMessageEntered: ({ component, message }) => {
- component.renderMessage(message);
- },
- });
- });
Manage Users
Assign chat users:
- Specify the user's ID.
- Specify the user's name. If the name is not specified, it becomes "Unknown User".
- Define avatars with a URL and alt text. If the URL is not specified, the avatar becomes the user's name initials.
- Assign a user to the user property to define the chat owner.
- const firstUser = {
- id: "1",
- name: "User"
- };
- const secondUser = {
- id: "2",
- name: "Feedback Bot",
- avatarUrl: "./images/Chat/bot.png"
- };
- $(function() {
- $("#chat").dxChat({
- // ...
- user: firstUser,
- });
- });
Set Initial Messages
If you want to specify initial messages in the Chat, use the items array.
- const initialMessages = [{
- timestamp: Date.now(),
- author: secondUser,
- text: "Hello! We'd love to hear your feedback. Please share your thoughts below!"
- }];
- $(function() {
- $("#chat").dxChat({
- // ...
- items: initialMessages,
- });
- });
Post-Processing
Use onMessageEntered to perform message post processing (like sending the message to the server for storage). This tutorial simulates sending a message to a backend:
- The Feedback Bot user is added to the typingUsers array to show them typing.
- After one second, the typingUsers array is emptied, and Chat displays the answer message.
- After that, an alert is displayed, and Chat is disabled.
- $(function() {
- function sendToBackend() {
- setTimeout(() => {
- chat.option("typingUsers", []);
- chat.renderMessage({
- text: "Thanks for helping us improve!",
- author: secondUser,
- timestamp: Date.now()
- });
- chat.option("alerts", [{
- id: 1,
- message: "Session expired"
- }]);
- chat.option("disabled", true);
- }, 1000);
- }
- $("#chat").dxChat({
- // ...
- onMessageEntered: ({ component, message }) => {
- //...
- chat.option("typingUsers", [secondUser]);
- sendToBackend();
- },
- });
- });
If you have technical questions, please create a support ticket in the DevExpress Support Center.