How does the browser access swoole

How does the browser access swoole

Preface

Swoole is a high-performance, asynchronous, network communication framework written in PHP language. Swoole can be used to easily build highly concurrent network applications, especially suitable for the development of WebSocket, HTTP, TCP, UDP and other protocols.

In the process of using Swoole, sometimes you need to access the network application written by Swoole through the browser. This article will introduce how the browser accesses Swoole to facilitate debugging and testing during development.

1. HTTP protocol

First we need to understand the HTTP protocol. HTTP (Hypertext Transfer Protocol) is an application layer protocol for transmitting hypermedia documents, usually based on the TCP protocol.

HTTP protocol adopts client-server mode. The client initiates a request and the server returns a response. HTTP requests consist of request headers and request bodies, and responses consist of response headers and response bodies. Request headers and response headers are expressed in the form of key-value pairs, for example:

Request header:

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Upgrade-Insecure-Requests: 1

Response header:

HTTP/1.1 200 OK
Date: Tue, 22 Jun 2021 06:59:43 GMT
Server: Apache/2.4.41 (Ubuntu)
Last-Modified: Mon, 21 Jun 2021 01:53:04 GMT
ETag: "2eab-5c4965a6870bb"
Accept-Ranges: bytes
Content-Length: 11947
Vary: Accept-Encoding
Content-Type: text/html

2. Swoole HTTP Server

Swoole provides an HTTP server to easily build network applications based on the HTTP protocol. Using the Swoole HTTP server allows browsers to access web applications written in Swoole. Here is a simple example:

<?php

$http = new Swoole\Http\Server("0.0.0.0", 9501);

$http->on("start", function ($server) {
    echo "Swoole http server is started at http://127.0.0.1:9501\n";
});

$http->on("request", function ($request, $response) {
    $response->header("Content-Type", "text/plain");
    $response->end("Hello, World!\n");
});

$http->start();

In this example, we create a Swoole HTTP server and listen on port 9501. When a browser accesses this server, a simple text string "Hello, World!" is returned.

3. Access the Swoole HTTP server

Next we will discuss how to access the Swoole HTTP server in the browser. Assuming that the Swoole HTTP server is running on port 9501 on the local host, we can use the following URL to access the server:

http://127.0.0.1:9501/

Enter the URL in the browser and you will see the text string "Hello," returned by the browser. World!".

In the Swoole HTTP server, we can use the $request object to obtain the request information sent by the client, for example:

$http->on("request", function ($request, $response) {
    $message = "Method: " . $request->server["request_method"] . "\n";
    $message .= "URI: " . $request->server["request_uri"] . "\n";
    $message .= "Headers: " . json_encode($request->header) . "\n";
    $message .= "Content: " . $request->rawContent() . "\n";
    $response->header("Content-Type", "text/plain");
    $response->end($message);
});

This example uses the $request object to obtain the request information, including the request method and URI. , request header and request body. In this way, it is easy to understand the request information sent by the browser.

4. WebSocket protocol

In addition to HTTP protocol, Swoole also supports WebSocket protocol. The WebSocket protocol is a protocol based on the TCP protocol, which can achieve two-way communication and is very suitable for real-time communication scenarios. Swoole provides a WebSocket server to easily implement WebSocket functionality in PHP.

Here is a simple example:

<?php

$server = new Swoole\WebSocket\Server("0.0.0.0", 9501);

$server->on("start", function ($server) {
    echo "Swoole WebSocket server is started at ws://127.0.0.1:9501\n";
});

$server->on('open', function (Swoole\WebSocket\Server $server, $request) {
    echo "WebSocket connection opened: {$request->fd}\n";
});

$server->on('message', function (Swoole\WebSocket\Server $server, $frame) {
    echo "Received message: {$frame->data}\n";
    $server->push($frame->fd, "Received message: {$frame->data}");
});

$server->on('close', function (Swoole\WebSocket\Server $server, $fd) {
    echo "WebSocket connection closed: {$fd}\n";
});

$server->start();

In this example, we create a Swoole WebSocket server and listen on port 9501. When a client sends a message, the server returns the message unchanged to the client.

5. Access the Swoole WebSocket server

Accessing the Swoole WebSocket server in the browser is a little complicated. Since the WebSocket protocol is not based on the HTTP protocol, we cannot use URLs like accessing HTTP servers.

We can use JavaScript WebSocket API to communicate with Swoole WebSocket server in the browser. Here is an example of communicating using the JavaScript WebSocket API:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket Test</title>
</head>
<body>
    <input type="text" id="message" placeholder="Type your message here">
    <button onclick="sendMessage()">Send Message</button>
    <ul id="messages"></ul>
    <script>
        var socket = new WebSocket("ws://127.0.0.1:9501/");

        socket.onopen = function(event) {
            console.log("WebSocket is open now.");
        };

        socket.onmessage = function(event) {
            var messages = document.getElementById("messages");
            var message = document.createElement("li");
            var content = document.createTextNode(event.data);
            message.appendChild(content);
            messages.appendChild(message);
        };

        function sendMessage() {
            var input = document.getElementById("message");
            var message = input.value;
            socket.send(message);
            input.value = "";
        }
    </script>
</body>
</html>

This example creates a WebSocket object and connects to a Swoole WebSocket server. When the user enters a message in the text box and clicks the Send button, the JavaScript code sends the message to the server. After receiving the message, the server returns the message to the client as is, and the client displays the message in the message list.

6. Summary

This article introduces how the browser accesses network applications written by Swoole, including HTTP and WebSocket protocols. Through the introduction of this article, I believe you have mastered the skills of how to debug and test Swoole applications in the browser.

The above is the detailed content of How does the browser access swoole. For more information, please follow other related articles on the PHP Chinese website!