websocket练习项目代码
时间: 2024-08-08 12:01:25 浏览: 30
WebSocket是一种在单个TCP连接上进行全双工通信的协议。相比HTTP协议,WebSocket提供了一个持久化的连接,使得客户端和服务器之间可以实时地交换数据,而不需要通过多次HTTP请求来进行交互。
下面是一个简单的WebSocket服务端(Node.js)及客户端(HTML、JavaScript)的基本示例:
### WebSocket服务端 - Node.js (基于ws库)
首先,你需要安装`ws`库:
```bash
npm install ws
```
然后创建服务端文件 `server.js` 并编写以下代码:
```javascript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
console.log('Client connected');
// 接收消息并响应回信息
ws.on('message', function incoming(message) {
console.log('Received: %s', message);
ws.send(`You said: ${message}`);
});
});
```
### WebSocket客户端 - HTML
接下来,在HTML页面中添加以下代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket Client Example</title>
<script>
function sendMessage() {
var message = document.getElementById("inputMessage").value;
var socket = new WebSocket("ws://localhost:8080");
socket.addEventListener("open", function (event) {
console.log("Connection open.");
socket.send(message);
}, false);
socket.addEventListener("message", function (event) {
console.log("Server response:", event.data);
}, false);
socket.addEventListener("error", function (event) {
console.error("Socket error:", event);
}, false);
socket.addEventListener("close", function (event) {
if(event.wasClean){
console.log("Normal close");
} else {
console.error("Unexpected close");
}
}, false);
}
</script>
</head>
<body>
<h2>WebSocket Chat</h2>
<input type="text" id="inputMessage" placeholder="Enter your message...">
<button onclick="sendMessage()">Send Message</button>
</body>
</html>
```
在这个示例中:
1. **服务器** (`server.js`) 创建了WebSocket服务器,并监听8080端口。
2. **客户端** (`index.html`) 包含了一个输入框和按钮,允许用户向服务器发送文本消息。
3. 当用户点击“Send Message”按钮时,会触发一个函数来建立WebSocket连接并发送输入的内容。
4. 连接建立后,客户端接收服务器返回的消息并在控制台显示。
这个基本例子展示了WebSocket如何实现客户端和服务端之间的实时通信,适用于聊天应用、游戏更新、实时数据分析等各种需要实时双向通信的应用场景。