如何将消息传递给websocket？

Question

我有一个 twig 模板，我正在尝试在 url 中发送具有相同令牌的消息意味着从 http://url/{token1} 发送的消息只能由具有相同令牌的另一个 url 接收。

但我无法将任何消息从 twig 传递到 node 到 symfony。

index.html.twig

<div id="chat">

</div>
<div>
    <div class="form-group">
        <label for="name">Name:</label> <input type="text" id="name">
    </div>
    <div class="form-group">
        <label for="message">Message:</label> <input type="text" id="message">
    </div>
    <button type="button" id="sendBtn" class="btn-primary">Send</button>
</div>

<script src="/bin/ws-broker.js"></script>
<script>
    const socket = new WebSocket("ws://localhost:8080");
    document.getElementById("sendBtn").addEventListener("click", function() {
        const message = {
            name: document.getElementById("name").value,
            message: document.getElementById("message").value
        };
        socket.send(JSON.stringify(message));
    });
</script>

/bin/ws-broker.js

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

    wss.on('connection', function connection(ws, req)
    {
        console.log('Connection Received from IP: ' + req.socket.remoteAddress);
        ws.on('message', function incoming(message) {
            if ('' === message) {
                //empty message
                return;
            }
            try {
                //process message as JSON object
                message = JSON.parse(message);
            } catch (e) {
                //failed parsing the message as JSON
                return;
            }
    
        });
    });
    
    console.log('Listening on port 8080');

控制器

    /**
     * @Route("/{token}", name="home")
     */
    public function index(): Response
    {
        return $this->render('home/index.html.twig', [
            'controller_name' => 'HomeController',
        ]);
    }

Answer 1

NodeJS WebSocket 代理服务和浏览器 WebSocket 客户端似乎有些混淆。

为了澄清，WebSocket 代理在后端作为 Apache 旁边的服务器运行，以侦听从浏览器 WebSocket 客户端发送的消息。与 Apache 侦听来自浏览器客户端的 HTTP 请求的方式相同。

WebSocket 代理服务器接收到一条消息，然后将数据作为 HTTP 请求转发，以便 Symfony 可以处理该请求并将代理返回给 WebSocket 客户端的响应发送回。

该过程与 Ratchet 的侦听方式相同，但没有使用 php bin/console app:command 在永久运行状态下加载 Symfony 和 Doctrine 的开销。除了已经在 Symfony 环境中之外，bin/ws-broker.js 会创建一个 HTTP 请求以发送到 Symfony。

bin/ws-broker.js 进程分解是这样的。

Browser HTTP Request -> /path/to/index -> 
  Symfony AppController::index() -> 
  return Response(Twig::render('index.html.twig')) -> 
    WebSocket Client - socket.send(message) -> 
      [node bin/ws-broker.js WebSocket Server - ws.on('message')] ->
      [node bin/ws-broker.js http.request()] -> /path/to/score-handler -> 
        Symfony AppController::scoreHandler() -> 
        return JsonResponse(data) ->  
      [node bin/ws-broker.js WebSocket Server - ws.send(response) to WebSocket Client] ->
    WebSocket Client - socket.onmessage()

bin/console app:command Ratchet 进程分解如下。

Browser HTTP Request -> /path/to/index -> 
  Symfony AppController::index() -> 
  return Response(Twig::render('index.html.twig')) -> 
    WebSocket Client - socket.send(message) -> 
      [php bin/console app:command - Ratchet\MessageComponentInterface::onMessage()] ->
      [php bin/console app:command - $client->send(response) to WebSocket Client] ->
    WebSocket Client - socket.onmessage()

---

将 Symfony HTTP 请求和响应处理程序添加到 NodeJS WebSocket 侦听器服务

// bin/ws-broker.js

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

wss.on('connection', function connection(ws, req) {
    console.log('Connection Received from IP: ' + req.socket.remoteAddress);
    ws.on('message', function incoming(message) {
        if ('' === message) {
            //empty message
            return;
        }

        try {
            //process message as JSON object
            message = JSON.parse(message);
        } catch (e) {
            //failed parsing the message as JSON
            return;
        }

        //convert the WS message to a query string for the Symfony Request object
        let postData = qs.stringify({
            "name": message.name, 
            "message": message.message
        });
        let http_options = {
            host: 'localhost',
            path: '/' + message.token,
            port: 8000,
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Content-Length': postData.length
            }
        };

        //forward the message to Symfony using an HTTP Request
        let req = http.request(http_options, function(res) {
            res.setEncoding('utf8');
            //process the Symfony response data
            let data = '';
            res.on('data', (chunk) => {
                data += chunk
            });

            //send the Symfony Response back to the WebSocket client
            res.on('end', function() {
                ws.send(data);
            });
        });

        //send the requested message to Symfony
        req.write(postData);
        req.end();
    });
});

console.log('Listening on port 8080');

运行 WebSocket 代理服务器

node bin/ws-broker.js &

添加一个路由来处理代理请求并将响应发送回代理。将令牌添加到 home/index.html.twig 上下文中。

class AppController extends AbstractController
{
    /**
     * @Route("/{token}", name="score_handler", requirements={ "token":"\w+" } methods={ "POST" })
     */
    public function scoreHandler(string $token): JsonResponse
    {
        //called by bin/ws-broker.js

        //do things here...

        return $this->json([
            'data' => 'Message Received!'
        ]);
    }

    /**
     * @Route("/{token}", name="home", requirements={ "token":"\w+" } methods={ "GET" })
     */
    public function index(string $token): Response
    {
        //called by Apache/Browser

        return $this->render('home/index.html.twig', [
            'controller_name' => 'HomeController',
            'token' => $token
        ]);
    }
}

从前端移除 bin/ws-broker.js，将令牌发送到 Broker 并添加响应处理程序

<!-- home/index.html.twig -->

<div id="chat"></div>
<div>
    <div class="form-group">
        <label for="name">Name:</label> <input type="text" id="name">
    </div>
    <div class="form-group">
        <label for="message">Message:</label> <input type="text" id="message">
    </div>
    <button type="button" id="sendBtn" class="btn-primary">Send</button>
</div>

<script type="text/javascript">
    const socket = new WebSocket("ws://localhost:8080");
    socket.onmessage = function(evt) {
        window.console.log(evt.data);
        //handle WebSocket Server Response...
    };
    document.getElementById("sendBtn").addEventListener("click", function() {
        const message = {
            name: document.getElementById("name").value,
            message: document.getElementById("message").value,
            token: "{{ token }}" //<------ SEND TOKEN to WebSocket Server
        };
        socket.send(JSON.stringify(message));
    });
</script>