Question

我正在尝试建立一个简单的聊天室，多个用户可以在其中发布消息。我已经设置了节点Web套接字，并且正在广播单个消息，但是此后它立即关闭了连接。

这包括对前端的响应和后端的node.js。为简单起见，我将所有消息存储和检索到json文件中。我正在使用ws：一个node.js websocket库来设置套接字连接。在客户端，我使用浏览器WebSocket实例并在同一端口上侦听。

    // In server.js (Backend)
    const server = http.createServer(doOnRequest)
    const WebSocket = require('ws')
    const wss = new WebSocket.Server({ port: 1994 })

    wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(data) {
    wss.clients.forEach(function each(client) {
    if (client !== ws && client.readyState === WebSocket.OPEN){
    client.send(data);
    }
    });
    });
    ws.on('close', () => {
    console.log('server conn closed');
    setTimeout(() => {
    console.log('closed by server console. log');
    }, 2000);
    })
    });

    function doOnRequest(request, response) {
    // This functions handles all the get and post calls and stores 
    it in a file
    }
    const server = http.createServer(doOnRequest)
    server.listen(3001);

    // IN Chatroom.js ( UI )

    const URL = 'ws://localhost:1994'
    class Chatroom extends React.Component {
    ws = new WebSocket(URL)
    constructor(props) {
    ////// binding classes declaring state //// 
    }
    componentDidMount() {
    this.ws.onopen = () => {
    console.log('connected')
    }

    this.ws.onmessage = evt => {
    // on receiving a message, add it to the list of messages
    let x = this.state.messageList;
    x ? x.push(JSON.parse(evt.data)) : [JSON.parse(evt.data)];
    this.setState({
    messageList: x,
    value: ''
    });
    }

    this.ws.onclose = () => {
    console.log('disconnected')
    }

    this.renderOlderMessages();
    }
    renderOlderMessages() {
    // render older messages using GET request
    }

    addNewMessage(chatObj) {

    // let res = a Post request (with Request body as chatObj).
    res.then(() => {
    this.ws.send(JSON.stringify(chatObj))
    let x = this.state.messageList;
    x ? x.push(chatObj) : [chatObj];
    this.setState({
    messageList: x,
    value: ''
    });
    });

    }

    render() {
    return (
    <div> 
    /// render old messages ///
    </div>

    <div>
    <form> 
    Input ---> New message ---> Submit
    </form>
    </div>
    )
    }
    }

在node.js中握手后，Web套接字连接断开连接并做出反应

0 个答案: