mysql - 如何使用 socket.io 删除所有用户的消息？

Question

我正在使用 socket.io 和 mysql(节点服务器)

但是我删除功能不成功。

这是我所拥有的以及到目前为止我已经尝试过的

io.on('connection', (socket) => {
    connection.query("SELECT * FROM `messages`", (err, data) => {
        for(let x in data) socket.emit('message', { id: data[x].message_id, text: data[x].message })
    })
    socket.on('disconnect', () => {
        // console.log('user disconnected');
    })

    socket.on('add-message', (message) => {
        addMessage(message, (res) => {
            if(res) io.emit('message', { type: 'new-message', text: message}); 
        })
    });

    socket.on('delete-message', (id) => {
        connection.query("DELETE FROM `messages` WHERE `message_id` = '"+ id +"'");
        io.emit('message', { type: 'delete-message', id: id }) // broadcast that something has changed
    })
})

Angular2 服务

import { Subject } from 'rxjs/Subject'
import { Observable } from 'rxjs/Observable'
import * as io from 'socket.io-client'

export class ChatService {
    private url = 'http://localhost:5000'
    private socket;

    sendMessage(message) {
        this.socket.emit('add-message', message);    
    }

    getMessages() {
        let observable = new Observable(observer => {
            this.socket = io(this.url);
            this.socket.on('message', (data) => {
                observer.next(data);
            });

            return () => {
                this.socket.disconnect();
            };  
        })

        return observable;
    }

    deleteMessage(id) {
        this.socket.emit('delete-message', id);
    }
}

组件

export class AppComponent implements OnInit, OnDestroy {
    messages = []
    connection;
    message: any;

    constructor(private chatService: ChatService){ }

    sendMessage(): void {
        this.chatService.sendMessage(this.message);
        this.message = '';
    }

    ngOnInit() {
        this.connection = this.chatService.getMessages().subscribe(message => {
            this.messages.push(message);
        })
    }

    ngOnDestroy() {
        this.connection.unsubscribe();
    }

    deleteData(id): void {
        for(var i = 0; i < this.messages.length; i++) {
            if(this.messages[i].id == id) {
                this.messages.splice(i, 1)
                this.chatService.deleteMessage(id)

                break;
            }
        }
    }
}

我试过的问题:

对于 deleteData()， 单击删除按钮的用户将拥有所需的 View 。但对于其他用户，他们必须刷新以获取更新的数据。

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

首先，请记住，您需要将所有数据存储到数组消息中。

具有挑战性的部分是 message_id。因为你不能给它估价。假设它有一个 auto_increment。我们需要添加另一个具有唯一值的表列。

对于我的示例，我将使用 message_identifier

该表将具有(message_id、message_content、message_identifier)

为了保持简短。 message_identifier 只会将时间转换为毫秒(我相信)。您必须创建一种方法，使其完全不同。

在您的服务器

获取之前的消息

connection.query("SELECT * FROM `messages`", (err, data) => {
    for(let x in data) socket.emit('message', { type: 'get-messages', message: data[x].message, identifier: data[x].identifier })
}

添加消息

socket.on('add-message', function(message, identifier) {
    connection.query("INSERT INTO `messages` (`message_content`, `message_identifier`) VALUES ('"+ message +"', '"+ identifier +"')", (err) => {
        if(!err) io.emit('message', { type: 'new-message', message: message, identifier: identifier })
    })
})

正在删除消息

socket.on('delete-message', function(identifier) {
    connection.query("DELETE FROM `messages` WHERE `message_identifier` = '"+ identifier +"'", (err) => {
        if(!err) io.emit('message', { type: 'delete-message', identifier: identifier })
    });
})

逻辑将在组件上。您只需要监听“消息”并通过请求传递的类型进行识别。

所以，这里是:

在您的组件上导入 socket.io 和 observable 并声明套接字。

import * as io from 'socket.io-client'
import { Observable } from 'rxjs/Observable'

private socket = io(/* url of server */); // inside AppComponent

在你的 AppComponent 类上。你需要听“消息”

let data$ = new Observable(observer => {
    this.socket.on('message', (data) => {
        if(data.type == 'get-message' || data.type == 'new-message') {
            observer.next({ message: data.message, identifier: data.identifier })
        } else if(data.type == 'delete-message') {
            for(let i = 0; i < this.messages.length; i++){
                if(parseInt(this.messages[i].identifier) == data.identifier){
                    this.messages.splice(i, 1);
                    break;
                }
            }
        }

        console.log(data)
    })
})

data$.subscribe(value => {
    this.messages.push(value);
})

您可以将其放在 ngOnInit 或构造函数中。我相信它应该适用于这两者中的任何一个。

关于您的服务

只需删除 getMessages，因为我们在组件上处理它。

希望对您有所帮助。干杯!