How can I use the variable outside localSocket? - websocket

Question

I have a Svelte based project. I'm using Socket.io on the backend. I was able to pull a data from the backend to the client side as a localsocket. Console log gives correct results. But I can only use this variable in localSocket. How can I export it? I want to use in div as {Player1} and {Player2}.
const localSocket = get(socket);
localSocket.on('RoundPlayers', (describingPlayer, gozetciPlayer) => {
const Player1 = describingPlayer.nickname;
const Player2 = gozetciPlayer.nickname;
console.log(Player1 + " " + Player2);
});
When I try to use it in the following way, I get the error {Player1}, {Player2} is not defined. But console.log is work
<script lang="ts">
...
const localSocket = get(socket);
localSocket.on('RoundPlayers', (describingPlayer, gozetciPlayer) => {
const Player1 = describingPlayer.nickname;
const Player2 = gozetciPlayer.nickname;
console.log(Player1 + " " + Player2);
});
</script>
<div>Next Players: {Player1} and {Player2}</div>
I hope I was able to explain what I mean.

Answer 1

In JavaScript, inner scopes see variables from outer scopes.
So, simply:
<script lang="ts">
...
let Player1
let Player2
const localSocket = get(socket);
localSocket.on('RoundPlayers', (describingPlayer, gozetciPlayer) => {
Player1 = describingPlayer.nickname;
Player2 = gozetciPlayer.nickname;
console.log(Player1 + " " + Player2);
});
</script>
<div>Next Players: {Player1} and {Player2}</div>
Furthermore, Svelte tracks changes to root scope let variables when they are reassigned (in Svelte components only, of course). So with this code, your markup will get updated each time your receive new values.