前端如何使用websocket发送消息及代码_websocket发送json

前端使用Websocket发送消息可以使用JavaScript的WebSocket API实现。下面是一个示例代码：

1. 首先创建WebSocket对象并连接服务器：

const socket = new WebSocket('ws://localhost:8080');
 
// 监听连接成功事件
socket.addEventListener('open', function (event) {
    console.log('连接已建立');
});

1. 发送消息：

// 发送文本消息
socket.send('Hello World!');
 
// 发送 JSON 格式的消息
const message = {type: 'msg', content: 'Hello World!'};
socket.send(JSON.stringify(message));

1. 监听服务器消息：

// 监听服务器消息
socket.addEventListener('message', function (event) {
    console.log('收到服务器消息：', event.data);
});

完整的代码示例：

const socket = new WebSocket('ws://localhost:8080');
 
socket.addEventListener('open', function (event) {
    console.log('连接已建立');
});
 
socket.addEventListener('message', function (event) {
    console.log('收到服务器消息：', event.data);
});
 
// 发送消息
document.querySelector('#send-btn').addEventListener('click', function () {
    const message = {type: 'msg', content: 'Hello World!'};
    socket.send(JSON.stringify(message));
});

在上面的代码中，我们创建了一个WebSocket对象并连接到服务器。然后通过send()方法向服务器发送消息，可以发送文本消息或者JSON格式的消息。最后通过addEventListener()方法监听服务器的消息。在发送消息的时候，我们可以点击页面上的按钮触发事件，并将消息发送给服务器。

详细操作如下跳转连接：：前端如何使用websocket发送消息及代码_不屈油条的博客-CSDN博客