是否有某种方法可以将变量（特别是映射）从服务器端导入到客户端（Socket.io）？

Question

我正在尝试为每个不同的客户端分配独特的颜色（通过使用 socket.id）。在我的 map() 中，我配对了 (socket.id,randomcolor())，但这个变量在服务器端。我发现 require() 语句在客户端不起作用，

为什么会这样，有什么解决办法？我希望能够将 map() 变量传递给客户端，以便它使用分配给 socket.id 的颜色并相应地显示颜色。
或者有什么方法可以在客户端知道 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

RequireJS 负责处理依赖关系并确保您拥有所需的一切。它是一个 Javascript 库，可以在您使用 Javascript 的任何地方工作，包括您的服务器端和客户端。它在您的客户端不起作用（显示在您看到的错误中）的原因是它没有在您的客户端配置。

您也可以阅读有关 configurating RequireJS 的内容。

但是，如果您在客户端正确设置它，则可能仍然存在问题，尤其是当您尝试在客户端使用服务器上可用的内容时。客户端是一个浏览器，可能离服务器很远。幸运的是 Socket.IO.

有一个客户 API

编辑

服务器端和客户端可以通过多种方式共享值：

WebSockets（一种双工协议，在大多数情况下应该选择）
推送通知
AJAX
页面加载
永久帧（这是一个应该避免的 hack）

Answer 2

我认为您不能将该地图作为参数发送，但您不能尝试创建一个数组数组并将其发送到 io.emit(colors, array) 之类的事件，一旦您将它放在客户端，您可以使用 map 或 reduce

之类的东西转换回地图

Answer 3

首先JS没有内置include/reference属性.

所以你不能只是将另一个文件加入另一个文件。但是一些图书馆用他们自己的书面方法等实现了这一点。

客户端执行的JS无法访问本地文件。尽管您可以访问在线文件加载到文档或对象中。因此可以通过 3rd 方脚本实现类似的功能。

Node.JS 遵循 CommonJS 模块系统并利用能够访问本地文件系统的能力。

关于索引：因此您不需要地图，地图与标准对象非常相似，主要区别可能是内容的顺序。但是因为你所需要的只是一个字典对象。只需创建一个简单的对象。然后你可以随时发出颜色索引。

const colorIndex = {}
colorIndex[socketID] = color

每个人都可以在客户端设置自己的颜色并将其发送到服务器，在每个更新服务器上都必须更新所有其他客户端的颜色。

一个客户端无法知道其他客户端，否则将不安全并且它不会像那样工作。它的工作方式更像是你在打电话给某人，服务器是连接你们两个的中间人。

因此，创建一个对象，存储套接字 ID、昵称以及您需要的任何其他信息。将其保存在服务器端，在每条消息中将它们与消息一起发送。

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
  });
});

所以你可能明白了。有很多方法可以实现。

是否有某种方法可以将变量（特别是映射）从服务器端导入到客户端（Socket.io）？

Is there some way of importing a variable(specifically map) from the server side onto the client side(Socket.io)?

javascript

node.js

express

socket.io

serverside-javascript