8、实时聊天与原生二维码扫描应用开发

实时聊天与原生二维码扫描应用开发

实时聊天应用开发

在实时聊天应用开发中，我们使用了 React 来构建界面。一个无状态的函数式组件可以包含有状态的子组件，例如输入框有状态，可在无状态的 Room 组件中使用。在消息数组中，我们需要设置 key 属性，以便 React 识别数组内的组件。以下是 Room 组件的代码示例：

export function Room(props: { room: model.Room, onPost: (content: string) => void }) {
  return (
    <div>
      <h2>{props.room.name}</h2>
      {props.room.messages.map(message => <Message key={message.id} message={message} />)}
      <Input onSubmit={content => props.onPost(content)} />
    </div>
  );
}

运行应用

运行整个应用，需按以下步骤操作：
1. 使用 gulp 进行编译。
2. 在终端运行 node dist/server 启动服务器。
3. 在浏览器中打开