Я создам инструмент для дартс-турнира для управления счетами.С интерфейсом 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);
}
}
где моя ошибка?