How to make chat messages display different content between sender and receiver in instant messaging?

the project uses a third-party H5 instant messaging service, and the current effect is as follows:

:

the messages on the left and right sides are inconsistent. Since I have not been in contact with instant messaging before, I do not know what is the right way for instant messaging to store and display data.
for example, in the case of the picture above, I would like to ask the bosses, how to make the two sides display different information?


A sends text messages to B in the format of
A-> B, socket.send ({type:'text',data:' Hello'})
B accepts messages like this
B socket.on (msg), and then parses and finds that type is directly rendered by text.
A sends a video request to B in the same way. Then the format can be {type:'event',data:'viedo'}
, and then B receives the event, and then you can render the video A wants, and then B refuses. Then you can send a data in the format {type:'event',data:'reject'} to A

after receiving the event, and then render it. B does not want video.

Menu