How to Use Websockets With Your Vue Projects
Feb 18, 2021
WebSockets are a great tool for when you want to show real time changes in data. For example, a server can push stock market price changes to the client rather than the client needing to ask for the changes via a HTTP request. With this being said, below you will find an example of a simple Vue application that shows the current time to the user and where the user can send a simple message to the websocket.
const app = new Vue({
data: () => ({ time: null }),
template: `
<div>
<h2>{{time}}</h2>
</div>
`,
mounted: function(){
let connection = new WebSocket('ws://localhost:3000/');
connection.onmessage = (event) => {
// Vue data binding means you don't need any extra work to
// update your UI. Just set the `time` and Vue will automatically
// update the `<h2>`.
this.time = event.data;
}
}
});
app.$mount("#content");Below is an example websocket server that you can use with the above Vue code.
"use strict";
const serverPort = 3000;
const express = require("express");
const http = require("http");
const WebSocket = require("ws");
const app = express();
const server = http.createServer(app);
const websocketServer = new WebSocket.Server({ server });
//when a websocket connection is established
websocketServer.on("connection", (webSocketClient) => {
// send feedback to the incoming connection
webSocketClient.send("The time is: ");
setInterval(() => {
let time = new Date();
webSocketClient.send("The time is: " + time.toTimeString());
}, 1000);
});
//start the web server
server.listen(3000, () => {
console.log("Websocket server started on port 3000");
});
Vue School has some of our favorite Vue
video courses. Their Vue.js Master Class walks you through building a real
world application, and does a great job of teaching you how to integrate Vue
with Firebase.
Check it out!
Did you find this tutorial useful? Say thanks by starring our repo on GitHub!