**Course Title:** Mastering Yii Framework: Building Scalable Web Applications **Section Title:** Real-Time Features with Yii and WebSockets **Topic:** Build a simple real-time chat application using Yii and WebSockets (Lab topic) **Objective:** By the end of this topic, you will be able to build a simple real-time chat application using Yii and WebSockets. You will learn how to set up a WebSocket connection, handle incoming messages, and implement real-time updates. **Prerequisites:** * Basic understanding of Yii framework and its ecosystem * Familiarity with WebSockets and real-time web applications * Knowledge of PHP and JavaScript **Step 1: Setting up the Project** To start building our real-time chat application, we need to create a new Yii project. Run the following command in your terminal: ```bash composer create-project --prefer-dist yiisoft/yii2-app-basic chat-app ``` This will create a new Yii project called `chat-app` in the current directory. **Step 2: Installing WebSocket Library** We will use the Ratchet WebSocket library to handle WebSocket connections in our application. Run the following command to install it: ```bash composer require ratchet/websocket ``` **Step 3: Configuring WebSocket** In the `config/web.php` file, add the following code to configure the WebSocket: ```php 'components' => [ 'websocket' => [ 'class' => 'yii\web\WebSocket', 'port' => 8080, ], ], ``` This will configure the WebSocket to listen on port 8080. **Step 4: Creating the Chat Controller** Create a new controller called `ChatController` in the `controllers` directory: ```php namespace app\controllers; use yii\web\Controller; use Ratchet\MessageComponentInterface; use Ratchet\ConnectionInterface; class ChatController extends Controller implements MessageComponentInterface { public function onOpen(ConnectionInterface $conn) { echo "New connection! ({$conn->resourceId})\n"; } public function onMessage(ConnectionInterface $from, $msg) { echo "Received message: {$msg}\n"; // Broadcast the message to all connected clients $this->broadcast($msg); } public function onClose(ConnectionInterface $conn) { echo "Connection {$conn->resourceId} has disconnected\n"; } public function onError(ConnectionInterface $conn, \Exception $e) { echo "An error has occurred: {$e->getMessage()}\n"; } public function broadcast($message) { // Send the message to all connected clients foreach ($this->connections as $conn) { $conn->send($message); } } } ``` This controller handles WebSocket connections, incoming messages, and broadcasts messages to all connected clients. **Step 5: Creating the Chat View** Create a new view called `chat.php` in the `views` directory: ```php <?php use yii\helpers\Html; $this->title = 'Chat'; ?> <div class="chat"> <h1><?= Html::encode($this->title) ?></h1> <div class="chat-messages"> <?php foreach ($messages as $message) : ?> <div class="message"> <?= $message ?> </div> <?php endforeach; ?> </div> <form> <input type="text" name="message" placeholder="Type a message..."> <button type="submit">Send</button> </form> </div> ``` This view displays the chat messages and allows users to send new messages. **Step 6: Routing** In the `config/web.php` file, add the following code to route the chat controller: ```php 'components' => [ 'urlManager' => [ 'rules' => [ 'chat' => 'chat/default/index', ], ], ], ``` This will route the chat controller to the `chat` URL. **Step 7: Running the Application** Run the following command to start the application: ```bash php yii serve ``` This will start the application on port 8080. **Step 8: Testing the Application** Open a web browser and navigate to `http://localhost:8080/chat`. This will display the chat interface. Type a message in the input field and click the Send button. The message will be broadcast to all connected clients. Congratulations! You have successfully built a simple real-time chat application using Yii and WebSockets. **Additional Resources:** * Ratchet WebSocket library: <https://github.com/ratchetphp/Ratchet> * Yii framework documentation: <https://www.yiiframework.com/doc> **Leave a comment or ask for help if you have any questions or need further assistance.**