拉拉维尔广播 - 客户端多次收到一个响应

Question

我正在创建一个简单的实时聊天应用程序(laravel, reactjs，pusher(。

服务器只是从客户端(ReactJs(获取名称和文本消息，将数据存储在数据库中，然后将新数据传递给我的事件，事件将其传递给客户端。

它可以工作，但我的问题是客户端中的侦听器多次接收数据，并且每次请求后接收数据的计数都会增加。
我只想从服务器获取一次数据。

我的控制器：

class MessageController extends Controller
{
public function index(Request $request){
$message = Message::create([
'name' => $request->name,
'text' => $request->text
])->toArray();
return event(new MessageEvent($message));
}
}

我的活动：

class MessageEvent implements ShouldBroadcast
{
use SerializesModels;
/**
* Create a new event instance.
*
* @return void
*/
public $data;
public function __construct($message)
{
$this->data = $message;
}
/**
* Get the channels the event should broadcast on.
*
* @return IlluminateBroadcastingChannel|array
*/
public function broadcastOn(){
return 'messages';
}
public function broadcastAs(){
return 'MessageEvent';
}
public function broadcastWith(){
return  [
'id' => $this->data['_id'],
'name' => $this->data['name'],
'text' => $this->data['text']
];
}
}

我的客户端聊天室：

export function ChatPage({ dispatch, getMessages, sendMessage, chatPage }) {
useInjectReducer({ key: 'chatPage', reducer });
useInjectSaga({ key: 'chatPage', saga });
const [text, setText] = useState('');
window.Echo = new Echo({
broadcaster: 'pusher',
key: '8171e9879fae800e8fef',
cluster: 'ap2',
forceTLS: true,
});
const channel = window.Echo.channel('messages');
channel.listen('.MessageEvent', function(data) {
console.log(data, 'index');
});
return (
<ChatWrapper>
<Helmet>
<title>ChatPage</title>
<meta name="description" content="Description of ChatPage" />
</Helmet>
<div className="container">
{chatPage.data
? chatPage.data.map(item => (
<div
className={
item.name === localStorage.getItem('chat')
? 'item-rigth'
: 'item-left'
}
key={item.id}
>
<span>
{item.name}
<hr />
{item.text}
</span>
</div>
))
: null}
<div className="form">
<div>
<input
type="text"
value={text}
onChange={e => setText(e.target.value)}
placeholder="Type Something..."
/>
<img
src={Send}
onClick={() => {
sendMessage(text);
setText('');
}}
/>
</div>
</div>
</div>
</ChatWrapper>
);
}
ChatPage.propTypes = {
dispatch: PropTypes.func.isRequired,
};
const mapStateToProps = createStructuredSelector({
chatPage: makeSelectChatPage(),
});
function mapDispatchToProps(dispatch) {
return {
dispatch,
sendMessage: text => dispatch(messageAction(text)),
getMessages: data => dispatch(messageSuccessAction(data)),
};
}
const withConnect = connect(
mapStateToProps,
mapDispatchToProps,
);
export default compose(
withConnect,
memo,
)(ChatPage);

我认为当我从邮递员调用事件时，它可以正常工作，但是当我从我的客户端请求服务器时，它会多次给出响应(我认为这是为了重新渲染页面(。

我到底应该怎么做？

Answer 1

嘿，我:)解决了这个问题。

我将听众部分放入useEffect：

useEffect(() => {
window.Echo = new Echo({
broadcaster: 'pusher',
key: '8171e9879fae800e8fef',
cluster: 'ap2',
forceTLS: true,
});
const channel = window.Echo.channel('messages');
channel.listen('.MessageEvent', function(data) {
console.log(data, 'data');
});
}, []);