b/s與c/s模式

<b/s與c/s

在網絡軟件開發中，經常會提到b/s模式與c/s模式。兩種模式代表了兩種不同的軟件架構。下面我們將從不同的角度進行闡述。

一、基本概念

b/s模式

b/s模式即瀏覽器/服務器模式，是通過瀏覽器對Web服務器提交請求，Web服務器接收請求並處理並返回結果，瀏覽器解析結果並呈現給用戶。


//b/s模式示例代碼
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>這是一份經典的Hello World程序，通過瀏覽器請求Hello World服務器，服務器返回Hello World進行解析呈現給用戶。</p>
</body>
</html>

c/s模式

c/s模式即客戶端/服務器模式，是指在計算機領域中可以將系統分成服務端和客戶端兩部分，服務端提供數據服務，客戶端對服務端發出請求，並接收服務器端的數據，然後對其進行操作和處理。


//c/s模式示例代碼
//服務端
import socket

server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server.bind(('localhost', 8888))
server.listen()

while True:
    conn, address = server.accept()
    print(f'Connection from {address} has been established!')

    conn.send(bytes('Welcome to the server!', 'utf-8'))
    conn.close()
//客戶端
import socket

client = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
client.connect(('localhost', 8888))

message = client.recv(1024)

print(message.decode('utf-8'))
client.close()

二、優缺點比較

b/s模式

b/s模式的優勢在於無需下載任何軟件就可以直接使用，界面友好、易於操作，廣泛應用於各種網站。但缺點也很明顯，多人同時訪問時經常會出現堵塞，同時也存在安全性、可擴展性等問題。

c/s模式

c/s模式的強大之處在於可以脫離瀏覽器的限制，更為靈活自由，同時可以充分利用計算機資源，客戶端也可以對數據進行本地處理，在數據傳輸、安全性方面也比較完善。但缺點是需要客戶端軟件的支持，且運行環境多樣，存在着兼容性問題。

三、案例分析

b/s模式案例

以網上購物為例，b/s模式可以通過大型購物平台引導消費者進入網站，消費者可以在平台上瀏覽和購買商品。根據消費者的數據請求，購物平台服務器相應的返回數據並進行處理，消費者接收到平台的響應信息後，進行操作界面進行操作。


//網上購物b/s模式代碼示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>購物平台</title>
</head>
<body>
  <h1>歡迎來到購物平台！</h1>
  <p>請在下方選擇想要購買的商品：</p>
  <form action="shopping.php" method="post">
    <input type="checkbox" name="product" value="apple">蘋果：5元/個
    <br>
    <input type="checkbox" name="product" value="banana">香蕉：3元/個
    <br>
    <input type="checkbox" name="product" value="orange">橙子：4元/個
    <br>
    <input type="submit" value="提交">
  </form>
  <p>已選商品：<span id="result"></span></p>
  <script>
    function showResult(){
      let result = "";
      let checkboxes = document.getElementsByName("product");
      for(let i=0; i<checkboxes.length; i++){
        if(checkboxes[i].checked===true){
          result += checkboxes[i].value + " ";
        }
      }
      document.getElementById("result").innerHTML = result;
    }
    showResult();
  </script>
</body>
</html>

c/s模式案例

以在線遊戲為例，c/s模式可以通過客戶端軟件與服務端建立連接，客戶端可以獲取服務端實時更新的遊戲狀態數據，並進行相應的操作和處理。在客戶端上還可以進行一系列操作和處理，例如聊天、好友、遊戲記錄等等。


//在線遊戲c/s模式代碼示例
//服務端
import socket

server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server.bind(('localhost', 8888))
server.listen()

games = {
    '1001': {
        'player1': {'pos_x': 0, 'pos_y': 0},
        'player2': {'pos_x': 100, 'pos_y': 100}
    }
}

def clientThread(conn, address, game_id):
    game = games[game_id]
    player = ''
    for k, v in game.items():
        if not v:
            game[k] = {'address': address, 'conn': conn}
            player = k
            break
    conn.send(bytes(f'{player} {game[player^1]["address"][0]} {game[player^1]["address"][1]}', 'utf-8'))
    while True:
        data = conn.recv(1024)
        if not data:
            break
        player_data = data.decode().split(" ")
        game[player]['pos_x'] = int(player_data[1])
        game[player]['pos_y'] = int(player_data[2])
        conn.sendall(bytes(f'{game[player^1]["pos_x"]} {game[player^1]["pos_y"]}', 'utf-8'))
    game[player] = {}

while True:
    conn, address = server.accept()
    game_id = conn.recv(1024).decode()
    thread = threading.Thread(target=clientThread, args=(conn, address, game_id))
    thread.start()
//客戶端
import socket

class player:
    def __init__(self, pos_x=0, pos_y=0):
        self.pos_x = pos_x
        self.pos_y = pos_y

    def update_pos(self, pos_x, pos_y):
        self.pos_x = pos_x
        self.pos_y = pos_y

    def get_pos(self):
        return (self.pos_x, self.pos_y)

client = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
client.connect(('localhost', 8888))

player1 = player()
player2 = player()

def send_position(player):
    input("回車開始移動")
    print("移動方向鍵盤上下左右，q退出")
    while True:
        if keyboard.is_pressed('q'):
            break
        if keyboard.is_pressed('up'):
            player.pos_y -= 10
        if keyboard.is_pressed('down'):
            player.pos_y += 10
        if keyboard.is_pressed('left'):
            player.pos_x -= 10
        if keyboard.is_pressed('right'):
            player.pos_x += 10
        data = f'{player.get_pos()[0]} {player.get_pos()[1]}'
        client.send(bytes(data, 'utf-8'))
        data = client.recv(1024).decode().split(" ")
        player2.update_pos(int(data[0]), int(data[1]))

if __name__ == "__main__":
    #選擇遊戲房間
    game_id = input("請輸入遊戲房間號：")

    #啟動線程
    t1 = threading.Thread(target=send_position, args=(player1,))
    t2 = threading.Thread(target=send_position, args=(player2,))
    t1.start()
    t2.start()
    t1.join()
    t2.join()

    client.close()

原創文章，作者：PPQSF，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/369712.html

b/s與c/s模式

一、基本概念

b/s模式

c/s模式

二、優缺點比較

b/s模式

c/s模式

三、案例分析

b/s模式案例

c/s模式案例

相關推薦

發表回復