Local Node.js Server Recieve and Send messages to component on website

Question

I want to run a local Node.js server, or listen for events and then run other Node functions, but also emit messages too.

So, for example lets say within my CMS I have a button labeled Start Watch . If I click this I want to emit and even using Socket.io which my local Node script on the machine will see, and then run some more code, in this case it would be gulp watch .

Then in the other direction during the watch, if files are uploaded I want to be able to emit this to my CMS to update the user visually that a file was uploads or something.

This is completely wrong I think but this is my attempt, but doesn't work!#

Vue Component on CMS

<template>
    <h2>Chat Testing</h2>
</template>
<script>
export default {
    mounted() {
        let socket = require('socket.io');
        socket.emit('connection', []);
    }
}
</script>

Local script on laptop:

let app = require('express')();
let http = require('http').createServer(app);
let io = require('socket.io')(http);

io.on('connection', (socket) => {
    console.log('a user connected');
});

http.listen(3000, () => {
    console.log('listening on *:3000');
});

Answer 1

Use the package socket.io-client on the client.

First you need to connect to the server.

Client API