BS架构实现实时通信及展示

原创

mob64ca12e4594b 2024-07-27 08:47:35 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e4594b的原创作品，请联系作者获取转载授权，否则将追究法律责任

BS架构实现实时通信及展示

随着互联网技术的发展，BS（Browser/Server，浏览器/服务器）架构逐渐成为主流的软件架构模式。BS架构通过浏览器作为客户端，服务器作为服务端，实现数据的实时通信和展示。本文将介绍BS架构实现实时通信及展示的方法，并提供代码示例。

1. BS架构概述

BS架构是一种分层的架构模式，它将应用程序分为三个层次：表示层（浏览器）、业务逻辑层（服务器）和数据层（数据库）。用户通过浏览器访问服务器，服务器处理业务逻辑并从数据库获取数据，然后将结果返回给浏览器进行展示。

2. 实时通信技术

实现BS架构的实时通信，主要有以下几种技术：

轮询（Polling）：客户端定期向服务器发送请求，获取数据更新。
长轮询（Long Polling）：服务器在有数据更新时才响应客户端的请求，减少请求次数。
WebSocket：建立一个全双工通信通道，服务器和客户端可以实时交换数据。

3. 代码示例

以下是一个使用WebSocket实现实时通信的示例。

3.1 服务器端（Node.js）

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  ws.send('something');
});

3.2 客户端（HTML + JavaScript）

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Test</title>
  <script>
    var ws = new WebSocket('ws://localhost:8080');

    ws.onopen = function() {
      console.log('Connected');
      ws.send('something');
    };

    ws.onmessage = function(evt) {
      console.log('Received Message: ' + evt.data);
    };
  </script>
</head>
<body>
  WebSocket Test
</body>
</html>

4. 状态图

使用状态图描述WebSocket的连接状态：

stateDiagram-v2
  [*] --> Connecting : Connect
  Connecting --> [*] : Close
  Connecting --> Open : Connected
  Open --> [*] : Close

5. 序列图

使用序列图描述客户端和服务器之间的通信过程：

sequenceDiagram
  participant Client as C
  participant Server as S

  C->>S: Connect
  S->>C: Connected
  C->>S: Send message
  S->>C: Receive message
  C->>S: Close
  S-->>C: Close