WebSocket 前后端连接实例
时间: 2023-11-27 08:55:37 浏览: 39
WebSocket 是一种协议,它允许实现双向通信的网络应用程序。在前后端连接方面,WebSocket 协议是一种非常流行的技术。下面是一个 WebSocket 前后端连接的示例。
前端代码:
```js
const socket = new WebSocket('ws://localhost:8080');
socket.addEventListener('open', () => {
console.log('WebSocket 连接成功');
});
socket.addEventListener('message', (event) => {
console.log('接收到消息:', event.data);
});
socket.addEventListener('close', () => {
console.log('WebSocket 连接关闭');
});
socket.addEventListener('error', (error) => {
console.error('WebSocket 连接错误:', error);
});
function sendMessage(message) {
socket.send(message);
}
```
后端代码:
```js
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (socket) => {
console.log('WebSocket 连接成功');
socket.on('message', (message) => {
console.log('接收到消息:', message);
socket.send(`你发送了:${message}`);
});
socket.on('close', () => {
console.log('WebSocket 连接关闭');
});
});
```
在这个示例中,前端代码创建一个 WebSocket 实例并连接到本地的 WebSocket 服务器。当连接成功时,前端代码将打印一条消息。当收到消息时,前端代码将打印一条消息。当连接关闭或出现错误时,前端代码将打印适当的消息。
后端代码创建一个 WebSocket 服务器,并监听连接事件。当有客户端连接到服务器时,后端代码将打印一条消息。当收到消息时,后端代码将打印一条消息,并将消息发送回客户端。当连接关闭时,后端代码将打印适当的消息。
通过这个示例,你可以看到 WebSocket 的前后端连接是非常简单的。你只需要创建 WebSocket 实例,并在需要时发送和接收消息即可。