{"id":28841,"date":"2024-04-21T21:27:17","date_gmt":"2024-04-21T20:27:17","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/integracion-de-websockets-en-vue-js-para-actualizaciones-en-tiempo-real\/"},"modified":"2024-06-03T18:44:03","modified_gmt":"2024-06-03T17:44:03","slug":"integracion-de-websockets-en-vue-js-para-actualizaciones-en-tiempo-real","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/websockets-integration-in-vue-js-for-real-time-updates\/","title":{"rendered":"Integrating WebSockets in Vue.js for Real-Time Updates"},"content":{"rendered":"<p>In modern web development, the ability to operate in real time is more of a necessity than a luxury. With users expecting instant interactivity and instantly fresh data, technologies that enable these capabilities are paramount. One of the most efficient methods to implement real-time communication is through WebSockets, especially in applications that use Vue.js, a progressive JavaScript framework.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/websockets-integration-in-vue-js-for-real-time-updates\/#%C2%BFQue_son_los_WebSockets\" >What are WebSockets?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/websockets-integration-in-vue-js-for-real-time-updates\/#Configurando_Vuejs_con_WebSockets\" >Configuring Vue.js with WebSockets<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/websockets-integration-in-vue-js-for-real-time-updates\/#Paso_1_Configuracion_inicial_del_proyecto\" >Step 1: Initial Project Setup<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/websockets-integration-in-vue-js-for-real-time-updates\/#Paso_2_Instalar_SocketIO\" >Step 2: Install Socket.IO<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/websockets-integration-in-vue-js-for-real-time-updates\/#Paso_3_Establecer_el_servidor_SocketIO\" >Step 3: Set the Socket.IO server<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/websockets-integration-in-vue-js-for-real-time-updates\/#Paso_4_Integrando_SocketIO_en_Vuejs\" >Step 4: Integrating Socket.IO into Vue.js<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/websockets-integration-in-vue-js-for-real-time-updates\/#Conclusiones\" >Conclusions<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_son_los_WebSockets\"><\/span>What are WebSockets?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>WebSockets provide a persistent, bidirectional communication channel between a client and a server. Unlike the traditional HTTP request and response model, which is one-way, WebSockets allow both the client and server to send data independently once a connection has been established.<\/p>\n<p>This technology is ideal for web applications that require real-time interactions, such as online games, chat applications, e-commerce platforms that update prices or availability instantly, and any application where real-time data is critical.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Configurando_Vuejs_con_WebSockets\"><\/span>Configuring Vue.js with WebSockets<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To illustrate how WebSockets can be integrated into Vue.js, let&#039;s consider building a simple chat application. We will use <code>Socket.IO<\/code>, a popular library that makes it easy to integrate WebSockets on both the server and the client thanks to its easy-to-use API and its ability to automatically handle disconnections and reconnections.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Paso_1_Configuracion_inicial_del_proyecto\"><\/span>Step 1: Initial Project Setup<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>First, you need to have Node.js installed on your machine. You can then create a new Vue project using the Vue CLI if you haven&#039;t already:<\/p>\n<pre><code class=\"&quot;language-bash&quot;\">vue create vue-websockets-chat cd vue-websockets-chat<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Paso_2_Instalar_SocketIO\"><\/span>Step 2: Install Socket.IO<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once you&#039;re in your project directory, install Socket.IO along with its Vue.js client:<\/p>\n<pre><code class=\"&quot;language-bash&quot;\">npm install socket.io socket.io-client<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Paso_3_Establecer_el_servidor_SocketIO\"><\/span>Step 3: Set the Socket.IO server<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To use Socket.IO, we need to configure a server. The following example uses Node.js along with Express:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">\/\/ server.js const express = require(&#039;express&#039;); const http = require(&#039;http&#039;); const socketIo = require(&#039;socket.io&#039;); const app = express(); const server = http.createServer(app); const io = socketIo(server); io.on(&#039;connection&#039;, (socket) =&gt; { console.log(&#039;New client connected&#039;); socket.on(&#039;disconnect&#039;, () =&gt; { console.log(&#039;Client disconnected&#039; }); server.listen(3000, () =&gt; { console.log(&#039;Server running on http:\/\/localhost:3000&#039;); });<\/code><\/pre>\n<p>This simple server listens for new connections and disconnections, and retransmits any messages received to all connected clients.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Paso_4_Integrando_SocketIO_en_Vuejs\"><\/span>Step 4: Integrating Socket.IO into Vue.js<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In Vue.js, you can integrate Socket.IO as follows:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">\/\/ src\/main.js import Vue from &#039;vue&#039; import App from &#039;.\/App.vue&#039; import socketio from &#039;socket.io-client&#039;; import VueSocketIO from &#039;vue-socket.io&#039;; const socketInstance = socketio(&#039;http:\/\/localhost:3000&#039;); Vue.use(new VueSocketIO({ debug: true, connection: socketInstance })); new Vue({ render: h =&gt; h(App), }).$mount(&#039;#app&#039;)<\/code><\/pre>\n<p>In your Vue component, you can now easily listen to and emit events:<\/p>\n<pre><code class=\"&quot;language-vue&quot;\">&lt;template&gt;\n  &lt;div&gt;\n    &lt;input v-model=&quot;message&quot; @keyup.enter=&quot;sendMessage&quot;&gt;\n    &lt;ul&gt;\n      for (message in messages) {\n        &lt;li&gt;{{message}}&lt;\/li&gt;\n      }\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nexport default {\n  data() {\n    return {\n      message: &#039;&#039;,\n      messages: []\n    };\n  },\n  sockets:{\n    connect: function(){\n      console.log(&#039;socket connected&#039;)\n    },\n    &#039;chat message&#039;: function(msg){\n      this.messages.push(msg);\n    }\n  },\n  methods: {\n    sendMessage() {\n      this.$socket.emit(&#039;chat message&#039;, this.message);\n      this.message = &#039;&#039;;\n    }\n  }\n}\n&lt;\/script&gt;<\/code><\/pre>\n<p>This basic setup demonstrates how you can send and receive messages in real time in a Vue.js application using WebSockets with Socket.IO.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusiones\"><\/span>Conclusions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Integrating WebSockets with Vue.js is not only possible, but relatively easy thanks to libraries like Socket.IO that greatly simplify the real-time communication process. Whether you are developing a simple chat application or a complete real-time system, Vue.js along with WebSockets is a powerful combination that can take your applications to the next level.<\/p>\n<p>For more details and tutorials, feel free to visit <a href=\"https:\/\/nelkodev.com\/en\/\">my blog<\/a> or if you have any specific questions, you can contact me directly through my <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">contact page<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>In modern web development, the ability to operate in real-time is more of a necessity than a luxury. With users expecting instant interactivity and fresh data on the fly, technologies that facilitate these capabilities are paramount. One of the most efficient methods for implementing real-time communication is through WebSockets, especially when it comes to real-time [\u2026]<\/p>","protected":false},"author":1,"featured_media":28842,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,2207],"tags":[1740,205,211,2205,1167,2208,60,399,400,562,1417],"class_list":["post-28841","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-nodejs","tag-actualizaciones","tag-blog","tag-desarrollo","tag-frontend","tag-integracion","tag-nodejs","tag-para","tag-real","tag-tiempo","tag-vue-js","tag-websockets"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28841","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=28841"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28841\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28842"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}