Home >Web Front-end >JS Tutorial >How to create a real-time chat room using JavaScript and WebSocket

How to create a real-time chat room using JavaScript and WebSocket

WBOYOriginal: 2023-12-17 15:06:391223browse

How to use JavaScript and WebSocket to create a real-time chat room

Introduction: With the continuous development of the Internet, real-time communication is becoming more and more important. Live chat apps have become a standard feature on many websites and apps. This article will introduce how to build a simple real-time chat room using JavaScript and WebSocket technology.

1. What is WebSocket
WebSocket is a protocol that provides two-way real-time communication between the client and the server. Compared with the traditional HTTP protocol, WebSocket has lower latency and higher real-time performance, and can establish a persistent connection between the client and the server. WebSocket can transmit data in real time without refreshing the page.

2. Implement the required tools and environment

A server with WebSocket support, such as Node.js, Java, etc.
Front-end development tools, such as VS Code.
A browser that supports WebSocket, such as Chrome, Firefox, etc.

3. Create the server side

Install Node.js and create a new project folder.
Open the command line in the project folder and initialize a new Node.js project. Run the following command:
```
 npm init
```
Install the WebSocket module. Run the following command:
```
 npm install websocket
```

Create a WebSocket server using the following code:

const WebSocket = require('websocket').server;
const http = require('http');

const server = http.createServer((request, response) => {});
server.listen(8080, () => {
 console.log('Server is listening on port 8080');
});

const wsServer = new WebSocket({
 httpServer: server
});

wsServer.on('request', (request) => {
 const connection = request.accept(null, request.origin);
 
 connection.on('message', (message) => {
     // 处理接收到的消息
     console.log('Received message: ', message.utf8Data);
     
     // 向客户端发送消息
     connection.sendUTF('Message received: ' + message.utf8Data);
 });
 
 connection.on('close', (reasonCode, description) => {
     // 处理连接关闭事件
     console.log('Connection closed');
 });
});

Save and start the server to make sure the server is running properly.

4. Create a client

Create a new HTML file in the project folder and name it index.html.

Insert the following code in index.html:

<!DOCTYPE html>
<html>
<head>
 <title>实时聊天室</title>
</head>
<body>
 <form id="chatForm">
     <input type="text" id="messageInput" placeholder="输入消息">
     <button type="submit">发送</button>
 </form>
 <div id="chatBox"></div>

 <script>
     const chatForm = document.getElementById('chatForm');
     const messageInput = document.getElementById('messageInput');
     const chatBox = document.getElementById('chatBox');

     const socket = new WebSocket('ws://localhost:8080');

     socket.onopen = () => {
         console.log('连接已建立');
     };

     socket.onmessage = (event) => {
         const message = event.data;
         console.log('Received message: ', message);

         // 显示接收到的消息
         const messageElement = document.createElement('div');
         messageElement.innerText = message;
         chatBox.appendChild(messageElement);
     };

     chatForm.addEventListener('submit', (event) => {
         event.preventDefault();

         const message = messageInput.value;
         console.log('Sending message: ', message);

         // 发送消息到服务器
         socket.send(message);

         // 清空输入框
         messageInput.value = '';
     });
 </script>
</body>
</html>

Save and open the index.html file with a browser to ensure that the client is running normally.

5. Test chat room

Open multiple tabs in the browser, and each tab acts as a user of the chat room.
Enter a message in the input box of any tab page and send it.
Observe the messages received by each tab page to ensure that the messages are synchronized in real time.

Through the above steps, you have successfully built a simple real-time chat room using JavaScript and WebSocket. You can expand and optimize according to actual needs, such as adding user authentication, creating rooms, sending pictures, etc.

Summary: This article explains how to create a real-time chat room using JavaScript and WebSocket. WebSocket can establish a persistent connection between the client and the server to achieve fast and real-time data transmission. I hope this article helps you in building real-time communication applications.

The above is the detailed content of How to create a real-time chat room using JavaScript and WebSocket. For more information, please follow other related articles on the PHP Chinese website!

Java JavaScript firefox chrome html 并发 JS http websocket

Statement：

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

Previous article：JavaScript and WebSocket: Create an efficient real-time data backup systemNext article：JavaScript and WebSocket: Create an efficient real-time data backup system

See more

How to create a real-time chat room using JavaScript and WebSocket

Related articles