search

markbarton / egghead-vue-socket

6 stars 4 forks source link

Client or Server #2

Open fsebbah opened 4 years ago

fsebbah commented 4 years ago

Hi, In the hook created of Graph.vue, you conserve the connection at the takeInitialPulse() How the data are refreshed by the server ? I tried with your code but the problem is the same. The problem is similar at the Chapter 4. Damnage, it was a great project Thanks, Franck

markbarton commented 4 years ago

Hi Franck,

So the takeInitialPulse() is just a function to populate the array with some initial random values - its not connected to the Socket at all. You could ignore that function if required.

The Vue Socket Package exposes a new property called sockets - https://github.com/markbarton/egghead-vue-socket/blob/8b0f4fd3d95ee857143279a8cf644b043ce9ee3a/client/src/components/Graph.vue#L30

If an event is broadcast by the Socket server called PULSE in this example then the Vue component will automatically react to this event and call the function - which in this case takes the passed value from the server and pushes it into the heartbeats array. This array is bound by Vue already so any changes to it automatically update the graph.

So first thing to check is you Socket Server is running ok and you have configured the Vue app in the main.js to point to your Socket server - https://github.com/markbarton/egghead-vue-socket/blob/8b0f4fd3d95ee857143279a8cf644b043ce9ee3a/client/src/main.js#L13

Once you run your Vue app you should see websocket traffic in the Chrome Network console.

Because the Socket Server has a loop to emit the Pulse event you shouldnt need to do anything else - https://github.com/markbarton/egghead-vue-socket/blob/8b0f4fd3d95ee857143279a8cf644b043ce9ee3a/server/server.js#L24

Hopefully this helps - its covered in lesson 3 of the course.

Thanks

On Wed, 17 Jun 2020 at 12:05, Franck notifications@github.com wrote:

Hi, In the hook created of Graph.vue, you conserve the connection at the takeInitialPulse() How the data are refreshed by the server ? I tried your code but the problem is the same. Thanks, Franck

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/markbarton/egghead-vue-socket/issues/2, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAWU5YS7LHWBPJN62TEOIDRXCPRLANCNFSM4OAPUGEQ .

--

http://www.markbarton.com