问:
请展示一个简单websocket案例?
回答:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单小例子</title>
</head>
<body>
<input type="text" id="inMessage"><button id="sendMessage">发送</button>
<div id="showText"></div>
<script>
var liwebsocket = new WebSocket("wss://echo.websocket.org");
liwebsocket.onopen = function () {
console.log("websocket is open")
// 当打开websocket是,使div的暂未websocket is open
document.getElementById("showText").innerHTML = "websocket is open!!!";
}
// 打开之后先接受一下输入框中的信息 并展示在 div中
liwebsocket.onmessage = function (e) {
document.getElementById("showText").innerHTML = e.data;
}
// 向websocket发送输入框信息
document.getElementById("sendMessage").onclick = function () {
//先获取发送的内容
var textValue = document.getElementById("inMessage").value;
// 发送
liwebsocket.send(textValue);
}
// 最后不要忘记关闭
liwebsocket.onclose = function () {
console.log("websocket is close!!!!");
}
</script>
</body>
</html>
问:
展示一个完整案例
回答:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket 示例</title>
<style>
#showText {
margin-top: 10px;
padding: 10px;
border: 1px solid #ddd;
min-height: 50px;
}
</style>
</head>
<body>
<h1>WebSocket 示例</h1>
<input type="text" id="inMessage" placeholder="输入消息">
<button id="sendMessage">发送</button>
<div id="showText">等待连接...</div>
<script>
// 创建 WebSocket 对象并连接到回显服务器
var ws = new WebSocket("wss://echo.websocket.org/");
// 连接打开时触发
ws.onopen = function () {
console.log("WebSocket 连接已打开");
document.getElementById("showText").innerHTML = "WebSocket 连接已打开!";
};
// 接收到消息时触发
ws.onmessage = function (event) {
document.getElementById("showText").innerHTML = "收到消息: " + event.data;
};
// 发送按钮点击事件处理
document.getElementById("sendMessage").onclick = function () {
var message = document.getElementById("inMessage").value;
if (message) {
ws.send(message);
document.getElementById("showText").innerHTML = "发送消息: " + message;
} else {
document.getElementById("showText").innerHTML = "请输入消息后再发送!";
}
};
// 连接关闭时触发
ws.onclose = function () {
console.log("WebSocket 连接已关闭");
document.getElementById("showText").innerHTML = "WebSocket 连接已关闭!";
};
// 连接发生错误时触发
ws.onerror = function (error) {
console.error("WebSocket 错误: ", error);
document.getElementById("showText").innerHTML = "WebSocket 发生错误!";
};
</script>
</body>
</html>
问:
websocket可以实现哪些功能?
回答:
WebSocket 是一种在客户端和服务器之间建立持久连接的协议,它允许双向通信。它的主要优点是减少了传统 HTTP 请求/响应模式中的开销和延迟。以下是 WebSocket 可以实现的一些常见功能:
1. 实时聊天应用
WebSocket 特别适合构建实时聊天应用,因为它能够维持一个持久的连接,使得消息能够即时传递。用户之间可以实时地发送和接收消息,无需刷新页面或进行轮询。
2. 实时数据更新
WebSocket 使得服务器能够主动推送数据到客户端,这对于实时更新非常有用。例如:
- 金融市场数据:实时显示股票价格、货币汇率等。
- 体育赛事:实时更新比赛分数、比赛进度等。
3. 实时游戏
WebSocket 适合用于多人在线游戏的实时通信。它能低延迟地传输游戏状态和玩家操作,使得游戏体验更加流畅。
4. 在线协作工具
在协作编辑文档或图像的应用程序中,WebSocket 可以实时同步多个用户的编辑操作。例如,Google Docs 和 Figma 都使用了类似的技术来同步用户的编辑。
5. 实时通知
WebSocket 可以用于推送实时通知,例如:
- 社交媒体通知:接收新的评论、点赞等通知。
- 系统监控:实时接收系统状态和警报。
6. 直播视频流
虽然 WebSocket 不是专门为视频流设计的,但它可以用于小规模的实时视频流应用。对于大规模的视频流,通常会使用专门的视频流协议和服务。
7. IoT(物联网)设备通信
WebSocket 可以用于物联网设备与服务器之间的实时通信。例如:
- 智能家居设备:实时接收传感器数据或发送控制指令。
- 健康监测设备:实时传输生理数据。
8. 客户端和服务器间的实时数据交换
例如,实时同步用户状态、活动日志等。这对于需要高频次数据交换的应用尤其有用。
9. 聊天机器人
WebSocket 可以用于构建聊天机器人与用户之间的实时对话接口,使得机器人能够即时响应用户的消息。
10. 实时投票或调查
用户可以实时提交投票或调查答案,WebSocket 可以用来动态更新结果并显示给所有参与者。
WebSocket 与 HTTP 的比较
- HTTP:请求-响应模式,每次请求都需要重新建立连接,适合传统的网页和API调用。
- WebSocket:持久连接,双向通信,适合需要实时更新和低延迟的应用场景。
通过 WebSocket,开发者可以实现许多需要实时或双向通信的应用,提高用户体验和系统效率
问:
请实现两个对话框的websocket聊天功能?
回答:
left.html
<!DOCTYPE html>
<html>
<head>
<title>Left User</title>
</head>
<body>
<h1>Left User</h1>
<textarea id="messageInput" placeholder="Type a message..."></textarea>
<button onclick="sendMessage()">Send</button>
<div id="messages"></div>
<script>
const ws = new WebSocket('ws://localhost:8080');
const messageInput = document.getElementById('messageInput');
const messages = document.getElementById('messages');
ws.onmessage = event => {
if (event.data instanceof Blob) {
const reader = new FileReader();
reader.onload = () => {
const message = document.createElement('div');
message.textContent = `Right User: ${reader.result}`;
messages.appendChild(message);
};
reader.readAsText(event.data);
} else {
const message = document.createElement('div');
message.textContent = `Right User: ${event.data}`;
messages.appendChild(message);
}
};
function sendMessage() {
const message = messageInput.value;
ws.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
right.html
<!DOCTYPE html>
<html>
<head>
<title>Right User</title>
</head>
<body>
<h1>Right User</h1>
<textarea id="messageInput" placeholder="Type a message..."></textarea>
<button onclick="sendMessage()">Send</button>
<div id="messages"></div>
<script>
const ws = new WebSocket('ws://localhost:8080');
const messageInput = document.getElementById('messageInput');
const messages = document.getElementById('messages');
ws.onmessage = event => {
if (event.data instanceof Blob) {
const reader = new FileReader();
reader.onload = () => {
const message = document.createElement('div');
message.textContent = `Left User: ${reader.result}`;
messages.appendChild(message);
};
reader.readAsText(event.data);
} else {
const message = document.createElement('div');
message.textContent = `Left User: ${event.data}`;
messages.appendChild(message);
}
};
function sendMessage() {
const message = messageInput.value;
ws.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', ws => {
ws.on('message', message => {
// 广播消息到所有连接的客户端
wss.clients.forEach(client => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
console.log('WebSocket server is running on ws://localhost:8080');
实现结果:
左侧框发送聊天信息给右侧框
同理,右侧框也可以发送给左侧。
通过优化,仿照微信的实现效果:
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Window</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.chat-container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 400px;
height: 100vh;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #fff;
overflow: hidden;
}
.messages {
flex: 1;
padding: 10px;
overflow-y: auto;
border-bottom: 1px solid #ddd;
display: flex;
flex-direction: column;
}
.message {
margin: 5px 0;
padding: 5px 10px;
border-radius: 15px;
max-width: 100px; /* Adjusted to fit approximately two Chinese characters */
word-wrap: break-word;
box-sizing: border-box;
}
.left-user {
background-color: #ffffff; /* 对调背景颜色 */
align-self: flex-start;
margin-right: auto;
border: 1px solid #ddd; /* 对调边框颜色 */
text-align: left;
}
.right-user {
background-color: #e0f1e0; /* 对调背景颜色 */
align-self: flex-end;
margin-left: auto;
border: 1px solid #c2e2c2; /* 对调边框颜色 */
text-align: left;
}
.input-container {
display: flex;
flex-direction: column;
padding: 10px;
border-top: 1px solid #ddd;
}
.input-container > div {
margin-bottom: 10px;
}
textarea {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
resize: none;
box-sizing: border-box;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="messages" id="messages"></div>
<div class="input-container">
<div>
<textarea id="leftUserInput" placeholder="Left User: Type a message..."></textarea>
<button onclick="sendMessage('left')">Send Left User Message</button>
</div>
<div>
<textarea id="rightUserInput" placeholder="Right User: Type a message..."></textarea>
<button onclick="sendMessage('right')">Send Right User Message</button>
</div>
</div>
</div>
<script>
const messages = document.getElementById('messages');
const leftUserInput = document.getElementById('leftUserInput');
const rightUserInput = document.getElementById('rightUserInput');
function sendMessage(user) {
let messageContent;
if (user === 'left') {
messageContent = leftUserInput.value.trim();
if (messageContent) {
addMessage(messageContent, 'left-user');
leftUserInput.value = '';
}
} else if (user === 'right') {
messageContent = rightUserInput.value.trim();
if (messageContent) {
addMessage(messageContent, 'right-user');
rightUserInput.value = '';
}
}
}
function addMessage(content, userClass) {
const message = document.createElement('div');
message.textContent = content;
message.className = `message ${userClass}`;
messages.appendChild(message);
messages.scrollTop = messages.scrollHeight;
}
function handleKeyDown(event, user) {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
sendMessage(user);
}
}
leftUserInput.addEventListener('keydown', (event) => handleKeyDown(event, 'left'));
rightUserInput.addEventListener('keydown', (event) => handleKeyDown(event, 'right'));
</script>
</body>
</html>