<\/code> element to display the message and set a fixed height and scrollbar style . Next, we added a text box and a button where the user can type a message and a button to send it. <\/p>
Next, we need to write the corresponding JavaScript code to handle the logic of the real-time chat room. The following is a simple implementation example: <\/p>
\/\/ 創(chuàng)建一個(gè)WebSocket連接\nconst socket = new WebSocket('ws:\/\/localhost:3000');\n\n\/\/ 當(dāng)連接建立時(shí)執(zhí)行\(zhòng)nsocket.onopen = function(event) {\n console.log('已連接到服務(wù)器');\n};\n\n\/\/ 當(dāng)收到服務(wù)器消息時(shí)執(zhí)行\(zhòng)nsocket.onmessage = function(event) {\n const messages = document.getElementById('messages');\n const message = document.createElement('div');\n message.innerText = event.data;\n messages.appendChild(message);\n \/\/ 滾動(dòng)到最底部\n messages.scrollTop = messages.scrollHeight;\n};\n\n\/\/ 發(fā)送消息\nfunction sendMessage() {\n const input = document.getElementById('input');\n const message = input.value;\n socket.send(message);\n input.value = '';\n}<\/pre> In the above code, we use the WebSocket API in JavaScript to establish a real-time connection with the server. When the connection is successfully established, we will receive an onopen<\/code> event. When a message is received from the server, the onmessage<\/code> event will be triggered. We will add the received message to the message display area and automatically scroll to the bottom by setting the scroll bar position. <\/p>Finally, we need to create a WebSocket server on the server side to process and forward messages. Here is an example using Node.js and the WebSocket library: <\/p>
const WebSocket = require('ws');\n\n\/\/ 創(chuàng)建WebSocket服務(wù)器\nconst wss = new WebSocket.Server({ port: 3000 });\n\n\/\/ 當(dāng)有新的WebSocket連接建立時(shí)執(zhí)行\(zhòng)nwss.on('connection', function(ws) {\n console.log('有新的連接');\n\n \/\/ 當(dāng)收到消息時(shí)執(zhí)行\(zhòng)n ws.on('message', function(message) {\n console.log('收到消息: ' + message);\n\n \/\/ 將消息廣播給所有連接的客戶端\n wss.clients.forEach(function(client) {\n client.send(message);\n });\n });\n});<\/pre> In the above code, we have used the WebSocket library to create a WebSocket server. When a new connection is established, the connection<\/code> event will be triggered. When a message is received, the message<\/code> event will be triggered, and we will broadcast the received message to all connected clients. <\/p>\nWith the above simple code example, we can implement a real-time chat room based on JavaScript. When the user enters a message and clicks the send button, the message is sent to the server through the WebSocket connection and forwarded by the server to all connected clients. After the client receives the message, it displays it in the UI interface. The whole process realizes the function of real-time communication. <\/p>\n
Of course, the above example is just a simple implementation. In an actual real-time chat room, other functions such as disconnection and reconnection, user authentication, private chat, etc. need to be handled. I hope this article can provide you with a basic idea and code example to help you build your own real-time chat room. <\/p>"}
Home
Web Front-end
JS Tutorial
Build a real-time chat room based on JavaScript
Build a real-time chat room based on JavaScript
Aug 10, 2023 pm 11:18 PM
javascript
chatroom
real time
Building a real-time chat room based on JavaScript
With the rapid development of the Internet, people are paying more and more attention to instant messaging and real-time interactive experience. As a common instant messaging tool, real-time chat rooms are very important to both individuals and businesses. This article will introduce how to build a simple real-time chat room using JavaScript and provide corresponding code examples.
We first need a front-end page as the UI interface of the chat room. Here is a simple HTML structure example:
<!DOCTYPE html>
<html>
<head>
<title>實(shí)時(shí)聊天室</title>
<style>
#messages {
height: 400px;
overflow: scroll;
border: 1px solid grey;
}
</style>
</head>
<body>
<div id="messages"></div>
<input type="text" id="input" placeholder="輸入消息">
<button onclick="sendMessage()">發(fā)送</button>
</body>
</html> In the above code, we have created a <div> element to display the message and set a fixed height and scrollbar style . Next, we added a text box and a button where the user can type a message and a button to send it.
Next, we need to write the corresponding JavaScript code to handle the logic of the real-time chat room. The following is a simple implementation example:
// 創(chuàng)建一個(gè)WebSocket連接
const socket = new WebSocket('ws://localhost:3000');
// 當(dāng)連接建立時(shí)執(zhí)行
socket.onopen = function(event) {
console.log('已連接到服務(wù)器');
};
// 當(dāng)收到服務(wù)器消息時(shí)執(zhí)行
socket.onmessage = function(event) {
const messages = document.getElementById('messages');
const message = document.createElement('div');
message.innerText = event.data;
messages.appendChild(message);
// 滾動(dòng)到最底部
messages.scrollTop = messages.scrollHeight;
};
// 發(fā)送消息
function sendMessage() {
const input = document.getElementById('input');
const message = input.value;
socket.send(message);
input.value = '';
} In the above code, we use the WebSocket API in JavaScript to establish a real-time connection with the server. When the connection is successfully established, we will receive an onopen event. When a message is received from the server, the onmessage event will be triggered. We will add the received message to the message display area and automatically scroll to the bottom by setting the scroll bar position.
Finally, we need to create a WebSocket server on the server side to process and forward messages. Here is an example using Node.js and the WebSocket library:
const WebSocket = require('ws');
// 創(chuàng)建WebSocket服務(wù)器
const wss = new WebSocket.Server({ port: 3000 });
// 當(dāng)有新的WebSocket連接建立時(shí)執(zhí)行
wss.on('connection', function(ws) {
console.log('有新的連接');
// 當(dāng)收到消息時(shí)執(zhí)行
ws.on('message', function(message) {
console.log('收到消息: ' + message);
// 將消息廣播給所有連接的客戶端
wss.clients.forEach(function(client) {
client.send(message);
});
});
}); In the above code, we have used the WebSocket library to create a WebSocket server. When a new connection is established, the connection event will be triggered. When a message is received, the message event will be triggered, and we will broadcast the received message to all connected clients.
With the above simple code example, we can implement a real-time chat room based on JavaScript. When the user enters a message and clicks the send button, the message is sent to the server through the WebSocket connection and forwarded by the server to all connected clients. After the client receives the message, it displays it in the UI interface. The whole process realizes the function of real-time communication.
Of course, the above example is just a simple implementation. In an actual real-time chat room, other functions such as disconnection and reconnection, user authentication, private chat, etc. need to be handled. I hope this article can provide you with a basic idea and code example to help you build your own real-time chat room.
The above is the detailed content of Build a real-time chat room based on JavaScript. For more information, please follow other related articles on the PHP Chinese website!
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
How to implement an online speech recognition system using WebSocket and JavaScript
Dec 17, 2023 pm 02:54 PM
How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.
The combination of Java and WebSocket: how to achieve real-time video streaming
Dec 17, 2023 pm 05:50 PM
With the continuous development of Internet technology, real-time video streaming has become an important application in the Internet field. To achieve real-time video streaming, the key technologies include WebSocket and Java. This article will introduce how to use WebSocket and Java to implement real-time video streaming playback, and provide relevant code examples. 1. What is WebSocket? WebSocket is a protocol for full-duplex communication on a single TCP connection. It is used on the Web
How to use JavaScript and WebSocket to implement a real-time online ordering system
Dec 17, 2023 pm 12:09 PM
Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
How to implement an online reservation system using WebSocket and JavaScript
Dec 17, 2023 am 09:39 AM
How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
How to use insertBefore in javascript
Nov 24, 2023 am 11:56 AM
Usage: In JavaScript, the insertBefore() method is used to insert a new node in the DOM tree. This method requires two parameters: the new node to be inserted and the reference node (that is, the node where the new node will be inserted).
See all articles
