Question

我正在尝试使用Web套接字创建实时跟踪系统，我能够获取用户的坐标并将标记放置在地图上，但是我不希望一个用户看到其他用户的标记。我大致知道我需要使用io.to（）的确切信息，但没有确切地知道如何使用它。我的另一个问题是，当我关闭HTML页面时，在socket.on（'disconnect'）方法中没有得到断开连接的消息。有人可以帮忙吗？

客户端JS -Viewer.js

let map;
let markers = new Map();

document.addEventListener('DOMContentLoaded', () => {
  const socket = io('/');

  const positionOptions = {
    enableHighAccuracy: true,
    maximumAge: 0
  };

  setInterval(() => {
    navigator.geolocation.getCurrentPosition(pos => {
      console.log("came inside set interval first one");
      const { latitude: lat, longitude: lng } = pos.coords
      socket.emit('updateLocation', { lat, lng })
    }, err => {
      console.error(err)
    }, positionOptions)
  }, 2000);

  socket.on('locationsUpdate', locations => {
    console.log(locations);
    // myMap.forEach(function(value, key) {
    //   console.log(key + ' = ' + value);
    // });
    markers.forEach((marker,id) => {
      marker.setMap(null)
      markers.delete(id)
    });

    locations.forEach(([id, position]) => {
      if (position.lat && position.lng) {
        var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
        const marker = new google.maps.Marker({
          position:position,
          map:map,
          icon:image
        })
        markers.set(id, marker)
        console.log(markers);
      }
    })
  });

  setInterval(() => {
    console.log("came inside setInterval, calling requestLocations");
    socket.emit('requestLocations')
  }, 2000);
});
function initMap() {
  console.log("came inside init map");
  navigator.geolocation.getCurrentPosition(pos => {
    const { latitude: lat, longitude: lng } = pos.coords
    map = new google.maps.Map(document.getElementById('map'), {
      center: { lat, lng },
      zoom: 20
    })

  }, err => {
    console.error(err)
  })
}

在服务器端，下面是代码

const http = require('http')
const path = require('path')
const express = require('express')
const bodyParser = require('body-parser')
const socketIo = require('socket.io')

const app = express()
const server = http.createServer(app)
const io = socketIo(server)

const locationMap = new Map()
app.use(express.static(path.join(__dirname, 'public')))

app.get('/', (req, res) => {
  res.send('Hello');
})

io.on('connection', socket => {

  socket.on('updateLocation', pos => {
    locationMap.set(socket.id, pos)
  })

  socket.on('requestLocations', () => {
    console.log(locationMap);
    console.log(Array.from(locationMap));
    socket.emit('locationsUpdate', Array.from(locationMap))
  })

  socket.on('disconnect', () => {
    console.log("disconnected");
    locationMap.delete(socket.id)
  })
})

server.listen(3000, err => {
  if (err) {
    throw err
  }

  console.log('server started on port 3000')
})

将插座彼此分开，

0 个答案: