node.js - 如何使用 socket.io 更新 Yii2 ListView 中的单独项目

Question

问题如下。

我有一个 View.php，里面只有一个唯一的 ID 和文本。这个 View.php 被分配给 Yii2 ListView 'itemView' 选项。渲染后看起来像这样:

1 One
2 Two
3 Three

如何实时更新id=2行的文本。对于此类更新，我使用的是 Yii2 + redis + nodejs + socket.io，我可以更新 ListView 之外的单独元素。但是我不明白如何更新一个元素，如果它在 ListView 呈现的某行(View.php)内。谢谢!

我的代码如下:从 Yii 我将数据发送到 redis channel “通知”:

return Yii::$app->redis->executeCommand('PUBLISH', [
            'channel' => 'notification',
            'message' => Json::encode(['name' => $name, 'id' => $id, 'message' => $message])
        ]); 

我的 nodejs 服务器正在监听 redis 并将数据进一步发送到目标用户的套接字:

redisClient.on("message", function(channel, message) {
        console.log("New message: " + message + ". In channel: " + channel);
        var message1 = JSON.parse(message);
        connectedUsers[message1.id].emit(channel, message);
    });

目标用户的套接字正在监听 channel (事件)“通知”，并在必要时更改元素(在此示例中，只需将消息添加到带有 id 通知的 div(在 index.php 文件中)):

socket.on('notification', function (data) {

        var message = JSON.parse(data);

        $( "#notifications" ).prepend( "<p><strong>" + message.name + "</strong>: " + message.message + "</p>" );

    });

在我的 index.php 中还有一个 listView

<?php
use yii\widgets\ListView;
...
echo ListView::widget( [
    'dataProvider' => $dataProvider,
    'itemView' => '_item',
] ); ?>

View 文件 _item.php 包含:

<?php
use yii\helpers\Html;
?>  

<?=$model->id;?> 
<?=$model->name;?>

那么如何在客户端套接字中指示我需要更改具有接收到的 id 的行的“名称”(它是通过来自 Yii 的消息获得的)。

Answer 1

我解决了我的问题如下:

ListView代码(在这个例子中我使用了ArrayDataProvider):

echo ListView::widget( [
    'dataProvider' => $dataProvider,
    'itemView' => function ($model, $key, $index, $widget) {
        return $this->render('_item',['model' => $model]);}
] ); ?>

本例中使用的数组和dataProvider:

$arr = [
    ['ID' => 'A1', 'Description' => 'Item 1'],
    ['ID' => 'A2', 'Description' => 'Item 2'],
    ['ID' => 'A3', 'Description' => 'Item 3'],
    ['ID' => 'A4', 'Description' => 'Item 4'],
    ['ID' => 'A5', 'Description' => 'Item 5'],
];
$dataProvider = new ArrayDataProvider([
'allModels' => $arr,
'pagination' => ['pageSize' => 5]
]);

注意:数组中的每一行代表一个独立的模型

_item.php 查看代码:

<div id= "<?php echo $model['ID'] ?>">
    <?php echo 'ID = '.$model['ID'] ?>
</div>

更新客户端套接字(notification.js):

document.getElementById("message.id").innerHTML = "<p><strong>" + message.name + "</strong>: " + message.message + "</p>";

因此，一个想法是为呈现的 ListView 中的每一行(div 元素的“id”)分配一个唯一的“model id”。然后基于接收到的 id(来自 Yii2 通过 redis 和 nodejs 服务器)我们可以处理行的内容。