下面详细讲解如何用JS WebSocket实现简单聊天的完整攻略:
下面详细讲解如何用JS WebSocket实现简单聊天的完整攻略:
什么是WebSocket?
WebSocket是HTML5提出的一种应用层协议,它是HTML5新引入的特性,使得浏览器和Web服务器之间可以进行双向通信,而不需要通过轮询的方式模拟实现。WebSocket协议通过一次 HTTP 握手,然后交换数据。
如何使用WebSocket实现简单的聊天?
WebSocket提供了用于在客户端(如浏览器)和服务器之间进行全双工通信的API。使用WebSocket实现简单聊天的步骤如下:
- 创建WebSocket
通过JavaScript中的WebSocket构造函数,创建WebSocket对象。代码如下:
const ws = new WebSocket('ws://localhost:3000');
- 监听WebSocket的事件:open、message和close
WebSocket对象有三个重要的事件:open、message和close。当WebSocket连接成功后,触发open事件;当接收到服务端发送的消息时,触发message事件;当WebSocket连接关闭时,触发close事件。通过监听这三个事件,我们可以完成双向通信。
const ws = new WebSocket('ws://localhost:3000');
// WebSocket连接成功事件
ws.addEventListener('open', (event) => {
console.log('WebSocket连接成功!');
});
// 接收到服务端发送消息事件
ws.addEventListener('message', (event) => {
console.log('接收到服务端发送的消息:', event.data);
});
// WebSocket连接关闭事件
ws.addEventListener('close', (event) => {
console.log('WebSocket连接关闭!');
});
- 发送消息到服务端
通过WebSocket对象的send()方法发送消息到服务端。
const ws = new WebSocket('ws://localhost:3000');
ws.addEventListener('open', (event) => {
console.log('WebSocket连接成功!');
// 发送消息到服务端
ws.send('Hello Server!');
});
- 从服务端接收消息
当接收到服务端发送的消息时,触发message事件。可以通过监听这个事件,将接收到的消息显示在页面上。
const ws = new WebSocket('ws://localhost:3000');
ws.addEventListener('open', (event) => {
console.log('WebSocket连接成功!');
ws.send('Hello Server!');
});
// 将接收到的消息显示在页面上
ws.addEventListener('message', (event) => {
const message = event.data;
const li = document.createElement('li');
li.innerText = message;
document.querySelector('#messages').appendChild(li);
});
以上是使用WebSocket实现简单聊天的基本步骤,下面给出一个完整的示例供参考。
示例1:使用WebSocket和Node.js实现简单聊天
前端代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket简单聊天</title>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="input" type="text" autocomplete="off">
<button>发送</button>
</form>
<script>
const ws = new WebSocket('ws://localhost:3000');
ws.addEventListener('open', (event) => {
console.log('WebSocket连接成功!');
});
// 将接收到的消息显示在页面上
ws.addEventListener('message', (event) => {
const message = event.data;
const li = document.createElement('li');
li.innerText = message;
document.querySelector('#messages').appendChild(li);
});
// 发送消息到服务端
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单默认跳转行为
const input = document.querySelector('#input');
const message = input.value;
input.value = ''; // 清空输入框
ws.send(message);
});
</script>
</body>
</html>
后端代码(使用Node.js和WebSocket库):
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });
wss.on('connection', (ws) => {
console.log('WebSocket连接成功!');
// 接收到客户端发送的消息
ws.on('message', (message) => {
console.log('接收到客户端发送的消息:', message);
// 将消息广播给所有客户端
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
// WebSocket连接关闭
ws.on('close', () => {
console.log('WebSocket连接关闭!');
});
});
此示例中,前端和后端使用WebSocket库进行通信,前端页面包含一个输入框和一个发送按钮,用户输入消息后点击发送按钮即可将消息发送到后端,后端收到消息后再将消息广播给所有客户端。
示例2:使用WebSocket和PHP实现简单聊天
前端代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket简单聊天</title>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="input" type="text" autocomplete="off">
<button>发送</button>
</form>
<script>
const ws = new WebSocket('ws://localhost:3000');
ws.addEventListener('open', (event) => {
console.log('WebSocket连接成功!');
});
// 将接收到的消息显示在页面上
ws.addEventListener('message', (event) => {
const message = event.data;
const li = document.createElement('li');
li.innerText = message;
document.querySelector('#messages').appendChild(li);
});
// 发送消息到服务端
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单默认跳转行为
const input = document.querySelector('#input');
const message = input.value;
input.value = ''; // 清空输入框
ws.send(message);
});
</script>
</body>
</html>
后端代码(使用PHP和Ratchet库):
require __DIR__ . '/vendor/autoload.php';
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;
use Ratchet\Server\IoServer;
class Chat implements MessageComponentInterface {
protected $clients;
public function __construct() {
$this->clients = new \SplObjectStorage;
}
public function onOpen(ConnectionInterface $conn) {
echo "WebSocket连接成功!\n";
$this->clients->attach($conn);
}
public function onMessage(ConnectionInterface $from, $msg) {
echo "接收到客户端发送的消息: $msg\n";
foreach ($this->clients as $client) {
if ($from !== $client) {
$client->send($msg);
}
}
}
public function onClose(ConnectionInterface $conn) {
echo "WebSocket连接关闭!\n";
$this->clients->detach($conn);
}
public function onError(ConnectionInterface $conn, Exception $e) {
echo "出错了: {$e->getMessage()}\n";
$conn->close();
}
}
$server = IoServer::factory(
new HttpServer(
new WsServer(
new Chat()
)
),
3000
);
$server->run();
此示例中,前端和后端使用Ratchet库进行通信,前端页面和示例1相同,只是后端代码使用了PHP代替Node.js。
本文标题为:如何用JS WebSocket实现简单聊天
- Antd ProComponents中的EditableProTable无法在子行继续新 2022-08-31
- 如何使用AJAX实现按需加载【推荐】 2022-12-28
- 解决方案:uni-app非nvue模式下切换主题后,App端闪屏、闪白、闪黑、状态栏主题色不稳定 2023-10-08
- Vue基础面试题 2023-10-08
- mint-ui如何自定义messageBox样式 2023-07-10
- vue插槽的使用 2023-10-08
- 第2天:什么是名字空间 2022-11-04
- android-SQLite代码段功能实现未在TextView中将文本格式设置为HTML 2023-10-26
- 从 ExtJs JsonStore 访问 piggybag 属性,有可能吗? 2022-09-15
- Vue3.2中setup语法糖的使用教程分享 2023-07-10