Angular, socket.io, Node.js, RethinkDB - повторяющиеся записи при запуске или перезагрузке Socket Connection - PullRequest
0 голосов
/ 12 октября 2018

Я создам инструмент для дартс-турнира для управления счетами.С интерфейсом Angular (2+), сервером socket.io и базой данных RethinkDB.

Все файлы проекта находятся на github: https://github.com/FuggyD (DartsAngular, DartsAngularBE)

Я начал со стола (игроков) на переосмыслении (дротик).

npm install

Для создания этой БД -> установить RethinkDB (https://www.rethinkdb.com/docs/install/), запустить ее и запустить:

node database.js

из репозитория AngularDartsBE, который создает базу данных и таблицы.запустите сервер socket.io:

node index.js

Мой проект Angular загружает всех игроков из базы данных и перечисляет их, также, когда я создаю нового игрока, все в порядке. Приложение на Chrome

Но когда я имитирую другого пользователя с помощью другого браузера (в моем случае Firefox), все записи проигрывателя будут дублироваться: Приложение в Chrome, когда Firefox загружает Angular App

socket.ioсервер:

const http = require('http');  
const fs = require('fs');  
const express = require('express');  
const socketIO = require('socket.io');  
const r = require('rethinkdb');  
const config = require('./config.json');

// Loading Express, HTTP, Socket.IO and RethinkDB
const db = Object.assign(config.rethinkdb, {  
    db: 'dart'
});
const app = express();  
const server = http.Server(app);  
const io = socketIO(server);

// Connecting to RethinkDB server
r.connect(db)  
    .then(conn => {
        // Index route which renders the index.html
        app.get('/', (req, res) => {
            fs.readFile(`${__dirname}/index.html`, (err, html) => {
                res.end(html || err);
            });
        });

        // The changefeed is provided by change() function
        // which emits broadcast of new messages for all clients
        r.table('players')
            .changes()
            .run(conn)
            .then(cursor => {
                cursor.each((err, data) => {
                    let players = data.new_val;
                    console.log(players)
                    io.sockets.emit('/get-players', players);
                });
            }); 

        // Listing all messages when new user connects into socket.io
        io.on('connection', (client) => {
            r.table('players')
                .run(conn)
                .then(cursor => {
                    cursor.each((err, players) => {
                        io.sockets.emit('/get-players', players);
                    });
                });

            // create player
            client.on('/create-player', (player) => {
                console.log("player to create");
                player.created = new Date();
                // io.sockets.emit('/player-created', r.table('players').insert(player,{return_changes: true}).run(conn, callback));
                r.table('players').insert(player,{return_changes: true}).run(conn, function (err, cursor) {

                        io.sockets.emit('/player-created', cursor.changes[0].new_val);

                    // io.sockets.emit('/player-created', player);

                });
            });

            // client.on('/get-players', (player) => {
            //     r.table('players')
            //     .run(conn)
            //     .then(cursor => {
            //         cursor.each((err, players) => {
            //             io.sockets.emit('/get-players', players);
            //         });
            //     });
            // });


        });

        server.listen(3000, () => console.log('Server started --> localhost:3000'));
    })
    .error(err => {
        console.log('Can\'t connect to RethinkDB');
        throw err;
    });

служба сокетов на Angular:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';

import * as socketIo from 'socket.io-client';
import { Player } from './model/player';

const SERVER_URL = 'http://localhost:3000';

@Injectable()
export class SocketService {

    constructor(

    ) { 
        console.log("socket loaded");
    }

    private socket;

    public initSocket(): void {
        this.socket = socketIo(SERVER_URL);
    }

    public createPlayer(player: Player) {
        return this.socket.emit('/create-player', player);
    }

    public onPlayers(): Observable<Player> {
        return new Observable<Player>(observer => {
            this.socket.on('/get-players', (data: Player) => observer.next(data));
        });
    }

    public onCreatedPlayer(): Observable<Player> {
        return new Observable<Player>(observer => {
            this.socket.on('/player-created', (data: Player) => observer.next(data));
        });
    }
}

компонент списка игроков на Angular

import { Component, OnInit } from '@angular/core';
import { SocketService } from '../socket.service';
import { Player } from '../model/player';

@Component({
  selector: 'app-player-list',
  templateUrl: './player-list.component.html',
  styleUrls: ['./player-list.component.scss']
})
export class PlayerListComponent implements OnInit {
    players: Player[] = [];
    ioConnection: any;
    player: Player;

    constructor(
        private socketService: SocketService
    ) { 

        this.player = new Player;
        this.thisinit();
    }

    ngOnInit() {

    }

    public thisinit() {
        this.socketService.onPlayers()
            .subscribe(
                (players: Player) => {
                    console.log(this.players.includes(players))
                    if(!this.players.includes(players)) {
                        this.players.push(players);
                        console.log(this.players)
                    }

                }
        );
    }

    public createPlayer(player: Player) {
        this.socketService.createPlayer(this.player);
    }
}

где моя ошибка?

...