webSocket的自学案例

fury_123

已于 2024-09-02 16:15:33 修改

阅读量50

点赞数

文章标签： websocket 网络协议网络

于 2024-08-29 23:04:09 首次发布

本文链接：https://blog.csdn.net/kuang_nu/article/details/141690557

版权

问：

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