golang 源码阅读之会议系统ion part III

分析完端代码后我们看下前端代码，先抓下网络请求，可以看到，多数请求是websocket请求。

启动

代码语言：javascript复制

    ws://localhost:5551/room.RoomSignal/Signal
    ws://localhost:5551/rtc.RTC/Signal
    http://localhost:8080/favicon.ico

加入room

代码语言：javascript复制

    ws://localhost:8080/sockjs-node/447/5xkq0jqb/websocket
    ws://localhost:5551/room.RoomSignal/Signal
    ws://localhost:5551/rtc.RTC/Signal

断开

代码语言：javascript复制

    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 的源码实现：

启动命令

代码语言：javascript复制

npm start

它实际执行的指令位于：ion-app-web/package.json

代码语言：javascript复制

 "start": "webpack-dev-server --config ./webpack.config.js --mode development --open --http",

可以看到它依赖于webpack，在配置文件ion-app-web/webpack.config.js里我们很容易找到入口文件

代码语言：javascript复制

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

代码语言：javascript复制

ReactDOM.render( <App />, document.getElementById("app"));

它渲染的模板是ion-app-web/public/index.html，里面有一个div，是它的dom挂载点：

代码语言：javascript复制

<div id="app" style="height:100%"></div>

react组件类App定义在ion-app-web/src/App.jsx

代码语言：javascript复制

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部分定义的回调函数有：

代码语言：javascript复制

            handleAudioTrackEnabled
            handleVideoTrackEnabled
            handleLeave
                      await cleanUp();
                    await conference.current.cleanUp();
                    window.location.reload();
                      setLogin(false);
            handleScreenSharing
                  setScreenSharingEnabled(enabled);
                  conference.current.handleScreenSharing(enabled);
            onMediaSettingsChanged

在center部分定义的函数有

代码语言：javascript复制

          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上注册了一系列方法：

代码语言：javascript复制

  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的一系列方法。

网站 webpack react javascript 打包

0 人点赞