Есть ли способ импортировать переменную (в частности, карту) со стороны сервера на сторону клиента (Socket.io)?

Question

Я пытаюсь назначить уникальные цвета каждому клиенту (используя socket.id). В моей карте () у меня есть пары (socket.id, randomcolor()), но эта переменная находится на стороне сервера. Я обнаружил, что оператор require () не работает на стороне клиента,

1. , почему это так и каково его решение? Я хочу иметь возможность передавать переменную map() на клиентскую сторону, чтобы она использовала цвет, назначенный этому socket.id, и отображала цвет соответствующим образом.

2. Или есть какой-то способ узнать socket.id на стороне клиента (я не думаю, что это так, но не уверен), в частности, компьютер пользователя должен знать, кто отправил то есть, что socket.id было использовано для отправки сообщения. Можно ли это знать?

Вот моя серверная сторона:

var express = require('express');
var app = express();
app.use(express.static('public'))
var http = require('http').createServer(app);
var io = require('socket.io')(http);


const map = new Map();



io.on('connection', function(socket) {
  console.log('connected by ' + socket.id);
  map.set(socket.id, RandomColor())
  socket.on('chat', function(data) {
    //emitting to all sockets connected
    io.emit('chat', data);
    console.log(map.entries());
  });

  socket.on('typing', function(data) {
    socket.broadcast.emit('typing', data);
  })
});



http.listen(3000, function() {
  console.log('listening on port 3000');
});

Вот клиентская сторона:

// import '../index';
var socket = io.connect('http://localhost:3000')

var message = document.getElementById('Message');
var handle = document.getElementById('Handle');
var btn = document.getElementById('Send');
var output = document.getElementById('Output');
var feedback = document.getElementById('Feedback');

var ids = []
console.log(server);
//emit event
btn.addEventListener('click', function() {
  socket.emit('chat', {
    message: message.value,
    handle: handle.value,
  })
})

message.addEventListener('keypress', function() {
  socket.emit('typing', handle.value)
})
messageArray = []
//listening for any message received
socket.on('chat', function(data) {
  // console.log(data);  
  feedback.innerHTML = ""
  var item = document.createElement('li')
  item.innerHTML = "<span style=\"font-family:\"cursive\";\" ;><strong>" + data.handle + ": " + data.message + "</strong></span>";
  document.getElementById('Output').appendChild(item)
})

//listening for any typing event listener
socket.on('typing', function(data) {
  feedback.innerHTML = "<p><strong>" + data + " is typing a message </strong></p>";
})

PS: Кроме того, я новичок в JS и Socket.io, поэтому, пожалуйста, предложите некоторые хорошие практики для всего, что в коде.

Answer 1

Прежде всего, JS не имеет встроенного свойства include / reference.

Таким образом, вы не можете просто объединить другой файл в другой файл. Но некоторые библиотеки достигают этого с помощью собственных письменных методов et c.

A JS, выполняемый на стороне клиента, не может получить доступ к локальным файлам. Хотя вы можете получить доступ к онлайн-загрузке файла в документ или к объекту. Таким образом, аналогичные функциональные возможности могут быть достигнуты с помощью сторонних сценариев.

Node.JS соответствует модульной системе Common JS и использует возможность доступа к локальной файловой системе.

Об индексе: вам не нужна карта, а карта очень похожа на стандартный объект, главное отличие в том, что это может быть порядок содержимого. Но так как все, что вам нужно, это объект словаря. Просто создайте простой объект. Затем вы можете испускать индекс цвета в любое время.

const colorIndex = {}
colorIndex[socketID] = color

Каждый может установить свой цвет на стороне клиента и отправить его на сервер, на каждом сервере обновлений должен обновлять каждый другой клиент о цвете.

Клиент не может знать других клиентов, в противном случае он не был бы в безопасности и не работает таким образом. Он работает больше, как будто вы звоните кому-то, а сервер - посредник, который связывает вас двоих.

Итак, создайте объект, храните идентификаторы сокетов, псевдонимы, любую другую необходимую вам информацию. Держите его на стороне сервера, в каждом сообщении отправляйте все вместе с сообщением.

const users = {}

io.on('connection', function(socket) {
  users[socket.id] = {//Add new user
   color:RandomColor()
  }

  socket.on('chat', function(message) {
    let u = users[socket.id];//Get user from index
    let data = {//Create a message package
     user:(u.username)?u.username:"Guest", //name of the user if set
     color:u.color,//color of user
     message
    }
    io.emit('chat', data );//Send
  });

  socket.on('setColor', function(color) {//User can update color
    users[socket.id].color = color
  });

  socket.on('setname', function(name) {//User can update username
    users[socket.id].username = name
  });
});

Так что вы, вероятно, поняли идею. Есть множество способов достижения.

Answer 2

Я не думаю, что вы могли бы отправить эту карту в качестве аргумента, но вы не можете попытаться создать массив массивов и сгенерировать его для события, такого как io.emit (colors, array), и как только оно будет у вас на на стороне клиента вы можете преобразовать обратно в карту, используя что-то вроде карты или уменьшить

Answer 3

Требуется JS отвечает за обработку зависимостей и гарантирует, что у вас есть все, что вам нужно. Это библиотека Javascript, которая может работать везде, где вы используете Javascript, включая ваш сервер и клиентскую часть. Причина, по которой он не работает на вашей клиентской стороне (что проявляется в появившейся ошибке), заключается в том, что он не настроен на вашей клиентской стороне.

Вы можете прочитать о конфигурировании Require JS.

Однако, если вы правильно настроите его на стороне клиента, могут возникнуть проблемы, особенно если вы попытаетесь использовать на стороне клиента то, что доступно на сервере. , Клиентская сторона - это браузер, потенциально очень далеко от сервера. К счастью, есть клиентский API для Socket.IO .

РЕДАКТИРОВАТЬ

Сервер и сторона клиента могут совместно использовать значения несколькими способами:

• WebSockets (дуплексный протокол, который следует выбирать, если он доступен в большинстве случаев)
• Pu sh уведомления
• AJAX
• Загрузка страницы
• Навсегда кадр (это хак, которого следует избегать)