分析完端代码后我们看下前端代码,先抓下网络请求,可以看到,多数请求是websocket请求。
启动
ws://localhost:5551/room.RoomSignal/Signal
ws://localhost:5551/rtc.RTC/Signal
http://localhost:8080/favicon.ico
加入room
ws://localhost:8080/sockjs-node/447/5xkq0jqb/websocket
ws://localhost:5551/room.RoomSignal/Signal
ws://localhost:5551/rtc.RTC/Signal
断开
ws://localhost:8080/sockjs-node/684/wcbodp4x/websocket
http://localhost:8080/
http://localhost:8080/ion-conference.bf76c3810c17921dd23e.js
http://localhost:8080/c191192575c918fc4f639abb1d031955.svg
http://localhost:8080/sockjs-node/info?t=1644652743792
接着我们看下webapp 的源码实现:
启动命令
npm start
它实际执行的指令位于:ion-app-web/package.json
"start": "webpack-dev-server --config ./webpack.config.js --mode development --open --http",
可以看到它依赖于webpack,在配置文件ion-app-web/webpack.config.js里我们很容易找到入口文件
entry: './src/index.jsx',
template: path.resolve(__dirname, "public/index.html"),
'/biz.Biz/Signal': {
target: 'ws://localhost:5551',
'/sfu.SFU/Signal': {
target: 'ws://localhost:5551',
对应react的入口文件是ion-app-web/src/index.jsx
ReactDOM.render( <App />, document.getElementById("app"));
它渲染的模板是ion-app-web/public/index.html,里面有一个div,是它的dom挂载点:
<div id="app" style="height:100%"></div>
react组件类App定义在ion-app-web/src/App.jsx
function App(props) {
return (
<Layout className="app-layout">
<Header className="app-header">
<div className="app-header-tool">
<Content className="app-center-layout">
<Footer className=".app-footer">
分为header,center,footer三部分。在header部分定义的回调函数有:
handleAudioTrackEnabled
handleVideoTrackEnabled
handleLeave
await cleanUp();
await conference.current.cleanUp();
window.location.reload();
setLogin(false);
handleScreenSharing
setScreenSharingEnabled(enabled);
conference.current.handleScreenSharing(enabled);
onMediaSettingsChanged
在center部分定义的函数有
onSendMessage
let info = reactLocalStorage.getObject("loginInfo");
room.message(info.roomId, uid, "all", 'Map', map);
setMessages([..._messages]);
onScreenSharingClick
openOrCloseLeftContainer
onVidFitClickHandler
onFullScreenClickHandler
handleJoin
handleJoin是最核心的代码,它建立了链接,并且初始化了room和rtc,并在room和rtc上注册了一系列方法:
let url =window.location.protocol +"//" +window.location.hostname +":" + "5551";
let connector = new Ion.Connector(url, "token");
setConnector(connector);
let room = new Ion.Room(connector);
let rtc = new Ion.RTC(connector);
room.onjoin = (success, reason) => {
console.log("onjoin: success=", success, ", reason=", reason);
onJoin(values, sid, uid);
};
room.onpeerevent = (ev) => {
if (ev.state == Ion.PeerState.JOIN) {
notificationTip(
"Peer Join",
"peer => " + ev.peer.displayname+ ", join!"
);
onSystemMessage(ev.peer.displayname + ", join!");
} else if (ev.state == Ion.PeerState.LEAVE) {
notificationTip(
"Peer Leave",
"peer => " + ev.peer.displayname + ", leave!"
);
onSystemMessage(ev.peer.displayname + ", leave!");
setPeers([..._peers]);
room.onmessage = (msg) => {
setMessages([..._messages]);
room
.join(
rtc.ontrackevent = function (ev) {
setPeers([..._peers]);
rtc.ondatachannel = ({ channel }) => {
rtc.join(values.roomId, uid)
内部调用了ion-sdk的一系列方法。
本文分享自 golang算法架构leetcode技术php 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!