Real-Time Features Development Tutorials, Guides & Insights

Create a new Vue component file in resources/js/components/ExampleComponent.vue:

   <template>
       <div class="p-4 bg-gray-100 text-center">
           <h1 class="text-xl font-bold text-blue-500">{{ localMessage }}</h1>
           <button @click="updateMessage" class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-700">
               Click Me
           </button>
       </div>
   </template>

   <script>
   export default {
       props: {
           message: {
               type: String,
               required: true,
           },
       },
       data() {
           return {
               localMessage: this.message, // Local copy of the prop
           };
       },
       methods: {
           updateMessage() {
               this.localMessage = 'Button Clicked!';
           },
       },
   };
   </script>

   <style scoped>
   h1 {
       text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
   }
   </style>

const socket = io();

const messageForm = document.getElementById('chat-form');
const messageInput = document.getElementById('message');
const messagesList = document.getElementById('messages');

messageForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const message = messageInput.value;
    socket.emit('chatMessage', message);
    messageInput.value = '';
});

socket.on('chatMessage', (message) => {
    const li = document.createElement('li');
    li.textContent = message;
    messagesList.appendChild(li);
});

node server.js