websocket 前端代码
时间: 2023-10-17 14:13:23 浏览: 47
以下是一个简单的 WebSocket 前端代码示例:
```
// 创建 WebSocket 对象并连接到服务器
var socket = new WebSocket("ws://localhost:8080");
// 当连接打开时
socket.onopen = function() {
console.log("WebSocket 连接已打开");
};
// 当接收到消息时
socket.onmessage = function(event) {
console.log("收到消息:" + event.data);
};
// 当连接关闭时
socket.onclose = function() {
console.log("WebSocket 连接已关闭");
};
// 当连接出错时
socket.onerror = function(error) {
console.log("WebSocket 错误发生:" + error);
};
// 发送消息到服务器
socket.send("Hello, WebSocket!");
```
在该示例中,创建了一个 WebSocket 对象并连接到服务器。然后,设置了几个事件监听器来处理连接状态和接收到的消息。最后,通过调用 `socket.send()` 方法来向服务器发送消息。
相关问题
websocket 前端代码示例
当然,下面是一个简单的 WebSocket 前端代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Example</title>
<script type="text/javascript">
// 创建 WebSocket 连接
var socket = new WebSocket("ws://localhost:8080/socket");
// 连接建立时触发
socket.onopen = function () {
console.log("WebSocket 连接已建立");
};
// 接收到消息时触发
socket.onmessage = function (event) {
var message = event.data;
console.log("收到消息: " + message);
};
// 连接关闭时触发
socket.onclose = function () {
console.log("WebSocket 连接已关闭");
};
// 发送消息
function sendMessage() {
var message = document.getElementById("message").value;
socket.send(message);
console.log("发送消息: " + message);
}
</script>
</head>
<body>
<h1>WebSocket Example</h1>
<input type="text" id="message" placeholder="输入消息" />
<button onclick="sendMessage()">发送</button>
</body>
</html>
```
这段代码创建了一个 WebSocket 连接,并在连接建立、收到消息、连接关闭时分别触发相应的事件处理函数。在页面上有一个输入框和发送按钮,可输入消息并通过 WebSocket 发送。你可以根据实际情况修改 WebSocket 连接的 URL。
websocket 前端完整代码
下面是一个基本的WebSocket前端代码示例:
```javascript
// 创建一个 WebSocket 实例
const ws = new WebSocket('ws://localhost:3000');
// 当连接成功时
ws.onopen = () => {
console.log('连接成功');
// 发送消息到服务器
ws.send('Hello from client!');
};
// 当接收到消息时
ws.onmessage = (event) => {
console.log(`接收到消息: ${event.data}`);
};
// 当连接关闭时
ws.onclose = () => {
console.log('连接关闭');
};
// 当连接出错时
ws.onerror = (error) => {
console.error(`WebSocket 错误: ${error}`);
};
```
在上面的代码中,我们首先创建了一个WebSocket实例并连接到服务器。一旦连接成功,我们就可以通过`ws.send()`方法向服务器发送消息。当服务器发送消息时,`ws.onmessage`事件将被触发,我们可以在其中处理接收到的消息。在连接关闭或发生错误时,分别会触发`ws.onclose`和`ws.onerror`事件。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)