当前位置：首页 > news >正文

webSocket的自学案例

news 来源：原创 2024/9/19 9:53:08

问：

请展示一个简单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 opendocument.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.jsconst 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>