websocket新增schema参数

2021-11-15 16:01:28 +08:00 · 2021-11-15 16:01:28 +08:00 · b70b07c8be
commit b70b07c8be
parent d5299065d3
5 changed files with 499 additions and 2 deletions
--- a/basic-properties/src/main/java/ink/wgink/properties/websocket/WebSocketProperties.java
+++ b/basic-properties/src/main/java/ink/wgink/properties/websocket/WebSocketProperties.java
@ -14,10 +14,19 @@ import org.springframework.stereotype.Component;
@ConfigurationProperties(prefix = "websocket")
 public class WebSocketProperties {

+    private String scheme;
    private String url;
    private Integer port;
    private String context;

+    public String getScheme() {
+        return scheme == null ? "ws" : scheme.trim();
+    }
+
+    public void setScheme(String scheme) {
+        this.scheme = scheme;
+    }
+
    public String getUrl() {
        return url == null ? "127.0.0.1" : url.trim();
    }
--- a/module-instant-message/src/main/java/ink/wgink/module/instantmessage/controller/route/WebrtcRouteDemoController.java
+++ b/module-instant-message/src/main/java/ink/wgink/module/instantmessage/controller/route/WebrtcRouteDemoController.java
@ -0,0 +1,27 @@
+package ink.wgink.module.instantmessage.controller.route;
+
+import ink.wgink.interfaces.consts.ISystemConstant;
+import io.swagger.annotations.Api;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.servlet.ModelAndView;
+
+/**
+ * @ClassName: UnifiedMessagingRouteController
+ * @Description: 统一消息统计可视化路由
+ * @Author: wanggeng
+ * @Date: 2021/10/24 3:30 下午
+ * @Version: 1.0
+ */
+@Api(tags = ISystemConstant.ROUTE_TAGS_PREFIX + "webrtc")
+@RestController
+@RequestMapping(ISystemConstant.ROUTE_PREFIX + "/webrtc")
+public class WebrtcRouteDemoController {
+
+    @GetMapping("webrtc-one2one-demo")
+    public ModelAndView report() {
+        return new ModelAndView("webrtc-one2one-demo");
+    }
+
+}
--- a/module-instant-message/src/main/java/ink/wgink/module/instantmessage/websocket/enums/MessageTypeEnum.java
+++ b/module-instant-message/src/main/java/ink/wgink/module/instantmessage/websocket/enums/MessageTypeEnum.java
@ -41,11 +41,16 @@ public enum MessageTypeEnum {
    SEARCH_ONLINE_USER_FRIEND(4002, "查询朋友在线用户，body 为查询用户的 userId"),
    SEARCH_COUNT_NEED_TO_DEALT_WITH(4003, "查询全部待办总数"),

+    WEBRTC_CALL(5001, "webrtc呼叫"),
+    WEBRTC_ANSWER(5002, "webrtc接听"),
+    WEBRTC_REFUSE(5003, "webrtc拒绝"),
+    WEBRTC_JOIN(5004, "webrtc加入"),
+
    STATUS_SEND(9001, "消息发送状态，body 为 StatusBody 的 JSON 字符串"),
    STATUS_SEND_ONLINE(9002, "发送在线状态，body 为 在线用户的ID JSONArray 字符串"),
    STATUS_SEND_OFFLINE(9003, "发送离线状态，body 为 离线用户的ID JSONArray 字符串"),

-    STATUS_RECEIVE(9101,"消息接受状态，body 为 StatusBody 的 JSON 字符串");
+    STATUS_RECEIVE(9101, "消息接受状态，body 为 StatusBody 的 JSON 字符串");

    private int value;
    private String summary;
--- a/module-instant-message/src/main/java/ink/wgink/module/instantmessage/websocket/handler/WebSocketHandler.java
+++ b/module-instant-message/src/main/java/ink/wgink/module/instantmessage/websocket/handler/WebSocketHandler.java
@ -100,7 +100,7 @@ public class WebSocketHandler extends SimpleChannelInboundHandler<Object> {
            sendHttpResponse(ctx, req, new DefaultFullHttpResponse(HttpVersion.HTTP_1_1, HttpResponseStatus.BAD_REQUEST));
            return;
        }
-        WebSocketServerHandshakerFactory wsFactory = new WebSocketServerHandshakerFactory(String.format("ws://%s:%s/%s", webSocketProperties.getUrl(), webSocketProperties.getPort(), webSocketProperties.getContext()), null, false);
+        WebSocketServerHandshakerFactory wsFactory = new WebSocketServerHandshakerFactory(String.format("%s://%s:%s/%s", webSocketProperties.getScheme(), webSocketProperties.getUrl(), webSocketProperties.getPort(), webSocketProperties.getContext()), null, false);
        webSocketServerHandshaker = wsFactory.newHandshaker(req);
        if (webSocketServerHandshaker == null) {
            WebSocketServerHandshakerFactory.sendUnsupportedVersionResponse(ctx.channel());
--- a/module-instant-message/src/main/resources/templates/webrtc-one2one-demo.html
+++ b/module-instant-message/src/main/resources/templates/webrtc-one2one-demo.html
@ -0,0 +1,456 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <base th:href="${#request.getContextPath() + '/'}">
+    <title>SRS</title>
+    <meta charset="utf-8">
+    <style>
+        body {
+            padding-top: 30px;
+        }
+    </style>
+    <link rel="stylesheet" type="text/css" href="assets/js/vendor/bootstrap/css/bootstrap.min.css"/>
+    <script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
+    <script type="text/javascript" src="assets/js/webrtc/adapter-7.4.0.min.js"></script>
+    <script type="text/javascript" src="assets/js/webrtc/srs.sdk.js"></script>
+    <script type="text/javascript" src="assets/js/webrtc/srs.sig.js"></script>
+    <script type="text/javascript" src="assets/js/restajax.js"></script>
+</head>
+<body>
+<img src='https://ossrs.net/gif/v1/sls.gif?site=ossrs.net&path=/player/one2one'/>
+<div class="navbar navbar-fixed-top">
+    <div class="navbar-inner">
+        <div class="container">
+            <a class="brand" href="https://github.com/ossrs/srs">SRS</a>
+            <div class="nav-collapse collapse">
+                <ul class="nav srs_nav">
+                    <li class="active"><a href="one2one.html">一对一通话</a></li>
+                    <li><a href="room.html">多人通话</a></li>
+                    <li class="srs_ignore">
+                        <a href="https://github.com/ossrs/signaling">
+                            <img alt="GitHub Repo stars"
+                                 src="https://img.shields.io/github/stars/ossrs/signaling?style=social">
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="container">
+    <div class="websocket-line">
+        接收用户ID <input id="toUserId" class="websocket-input" type="text" style="width: 196px;" placeholder="输入接收用户ID"/>
+    </div>
+    <div class="websocket-line">
+        <input id="clientName" class="websocket-input" type="text" placeholder="请输入客户端名称"/>
+        <button id="loginBtn" onclick="login()">登录</button>
+        <button id="closeBtn" style="display: none;" onclick="closeWebSocket()">关闭</button>
+    </div>
+    <div class="form-inline">
+        SRS:
+        <input type="text" id="txt_host" class="input-medium" value="">
+        Room:
+        <input type="text" id="txt_room" class="input-small" value="1">
+        Display:
+        <input type="text" id="txt_display" class="input-small" value="">
+        <button class="btn btn-primary" id="btn_start" onclick="send()">开始通话</button>
+    </div>
+
+
+    <div class="row">
+        <div class="span4 hide" id="publisher">
+            <label></label>
+            <video id="rtc_media_publisher" width="310" autoplay muted controls></video>
+
+            <label></label>
+            <span id='self'></span>
+        </div>
+        <div class="span6 hide" id="player">
+            <label></label>
+            <video id="rtc_media_player" width="310" autoplay muted controls></video>
+
+            <label></label>
+            <span id='peer'></span>
+            <a href="javascript:control_refresh_peer()">Refresh</a>
+            <input type="text" id="txt_alert" class="input-medium" value="">
+            <a href="javascript:control_alert_peer()">Alert</a>
+        </div>
+    </div>
+
+    <label></label>
+
+    <label></label>
+</div>
+<footer class="footer">
+    <div class="container">
+        <p>&copy; SRS 2020</p>
+    </div>
+</footer>
+<script type="text/javascript">
+    var sig = null;
+    var publisher = null;
+    var player = null;
+    var control_refresh_peer = null;
+    var control_alert_peer = null;
+    console.log('?wss=x to specify the websocket schema, ws or wss');
+    console.log('?wsh=x to specify the websocket server ip');
+    console.log('?wsp=x to specify the websocket server port');
+    console.log('?host=x to specify the SRS server');
+    console.log('?room=x to specify the room to join');
+    console.log('?display=x to specify your nick name');
+
+    /**
+     var startDemo = async function () {
+            var host = $('#txt_host').val();
+            var room = $('#txt_room').val();
+            var display = $('#txt_display').val();
+
+            // Connect to signaling first.
+            if (sig) {
+                sig.close();
+            }
+            sig = new SrsRtcSignalingAsync();
+            sig.onmessage = function (msg) {
+                console.log('Notify: ', msg);
+
+                if (msg.event === 'leave') {
+                    $('#player').hide();
+                }
+
+                if (msg.event === 'publish') {
+                    if (msg.peer && msg.peer.publishing && msg.peer.display !== display) {
+                        startPlay(host, room, msg.peer.display);
+                    }
+                }
+
+                if (msg.event === 'control') {
+                    if (msg.param === 'refresh') {
+                        setTimeout(function () {
+                            window.location.reload();
+                        }, 500);
+                    } else if (msg.param === 'alert') {
+                        alert('From ' + msg.peer.display + ': ' + msg.data);
+                    }
+                }
+
+                if (msg.participants.length >= 2) {
+                    $('.srs_merge').show();
+                } else {
+                    $('.srs_merge').hide();
+                }
+            };
+            await sig.connect(conf.wsSchema, conf.wsHost, room, display);
+
+            control_refresh_peer = async function () {
+                let r1 = await sig.send({action:'control', room:room, display:display, call:'refresh'});
+                console.log('Signaling: control peer to refresh ok', r1);
+            };
+            control_alert_peer = async function () {
+                let r1 = await sig.send({action:'control', room:room, display:display, call:'alert', data:$('#txt_alert').val()});
+                console.log('Signaling: control peer to alert ok', r1);
+            };
+
+            let r0 = await sig.send({action:'join', room:room, display:display});
+            console.log('Signaling: join ok', r0);
+
+            // For one to one demo, alert and ignore when room is full.
+            if (r0.participants.length > 2) {
+                alert('Room is full, already ' + (r0.participants.length - 1) + ' participants');
+                sig.close();
+                return;
+            }
+
+            // Start publish media if signaling is ok.
+            await startPublish(host, room, display);
+            let r1 = await sig.send({action:'publish', room:room, display:display});
+            console.log('Signaling: publish ok', r1);
+
+            // Play the stream already in room.
+            r0.participants.forEach(function(participant) {
+                if (participant.display === display || !participant.publishing) return;
+                startPlay(host, room, participant.display);
+            });
+
+            if (r0.participants.length >= 2) {
+                $('.srs_merge').show();
+            }
+        };
+
+     var startPublish = function (host, room, display) {
+            $(".ff_first").each(function(i,e) {
+                $(e).text(display);
+            });
+
+            var url = 'webrtc://' + host + '/' + room + '/' + display + conf.query;
+            $('#rtc_media_publisher').show();
+            $('#publisher').show();
+
+            if (publisher) {
+                publisher.close();
+            }
+            publisher = new SrsRtcPublisherAsync();
+            $('#rtc_media_publisher').prop('srcObject', publisher.stream);
+
+            return publisher.publish(url).then(function(session){
+                $('#self').text('Self: ' + url);
+            }).catch(function (reason) {
+                publisher.close();
+                $('#rtc_media_publisher').hide();
+                console.error(reason);
+            });
+        };
+
+     var startPlay = function (host, room, display) {
+            $(".ff_second").each(function(i,e) {
+                $(e).text(display);
+            });
+
+            var url = 'webrtc://' + host + '/' + room + '/' + display + conf.query;
+            $('#rtc_media_player').show();
+            $('#player').show();
+
+            if (player) {
+                player.close();
+            }
+
+            player = new SrsRtcPlayerAsync();
+            $('#rtc_media_player').prop('srcObject', player.stream);
+
+            player.play(url).then(function(session){
+                $('#peer').text('Peer: ' + display);
+                $('#rtc_media_player').prop('muted', false);
+            }).catch(function (reason) {
+                player.close();
+                $('#rtc_media_player').hide();
+                console.error(reason);
+            });
+        };
+
+     // Pass-by to SRS url.
+     let conf = SrsRtcSignalingParse(window.location);
+     $('#txt_host').val(conf.host);
+     conf.room && $('#txt_room').val(conf.room);
+     $('#txt_display').val(conf.display);
+
+     $(".ff_host").each(function(i,e) {
+            $(e).text(conf.host);
+        });
+     $(".ff_app").each(function(i,e) {
+            $(e).text($('#txt_room').val());
+        });
+     $('#ff_preview').attr('href', 'http://ossrs.net/players/srs_player.html?app=' + $('#txt_room').val() + '&stream=merge.flv&server=' + conf.host + '&vhost=' + conf.host + '&autostart=true');
+
+     // Update href for all navs.
+     $('ul.srs_nav').children('li').not('.srs_ignore').children('a').each(function (i, e) {
+            $(e).attr('href', $(e).attr('href') + conf.rawQuery);
+        });
+
+     $('#btn_apply').click(function () {
+            if ($('#txt_wx_video_tcurl').val() !== '' && $('#txt_wx_video_stream').val() !== '') {
+                $('#ff_wxvideo').text('"' + $('#txt_wx_video_tcurl').val() + $('#txt_wx_video_stream').val() + '"').show();
+                $('#ff_output').hide();
+                $('#ff_preview').parent().hide();
+            } else {
+                $('#ff_wxvideo').hide();
+                $('#ff_output').show();
+                $('#ff_preview').parent().show();
+            }
+        });
+
+     $("#btn_start").click(startDemo);
+     if (conf.autostart) {
+            startDemo();
+        }
+
+     **/
+
+        //
+    var websocket;
+
+    function register(sessionId) {
+        var registBody = {
+            id: new Date().getTime(),
+            type: 1000,
+            from: $('#currentUserId').val(),
+            to: $('#currentUserId').val(),
+            body: {
+                sessionId: sessionId
+            }
+        }
+        websocket.send(JSON.stringify(registBody));
+    }
+
+    function initWebSocket(sessionId) {
+        if ('WebSocket' in window) {
+            websocket = new WebSocket('ws://localhost:8081/websocket');
+            console.log("WebSocket连接成功")
+        } else {
+            alert('浏览器不支持WebSocket');
+            return;
+        }
+        //连接发生错误的回调方法
+        websocket.onerror = function () {
+            console.log('error')
+        };
+        //连接成功建立的回调方法
+        websocket.onopen = function (event) {
+            console.log('open', event);
+            // 打开连接，注册WebSocket
+            register(sessionId);
+        }
+        //接收到消息的回调方法
+        websocket.onmessage = function (event) {
+            var data = JSON.parse(event.data);
+            if (data.type === 1000) {
+                // 注册
+                var body = JSON.parse(data.body);
+                if (body.code === 200) {
+                    $('#loginStatus').html('已连接');
+                } else {
+                    $('#loginStatus').html(body.msg);
+                }
+            } else if (data.type === 2001) {
+                // 文本消息
+                var body = data.body;
+                $('#websocketHistoryBox').append('<div class="receive-msg-box"><div class="message receive-msg">' + body + '</div></div>');
+                autoScrollBottom();
+            } else if (data.type === 5001) {
+
+            } else if (data.type === 9001) {
+                // 发送状态
+                var body = JSON.parse(data.body);
+                if (body.code != 200) {
+                    $('#' + data.id).before('<span class="send-status" title="' + body.msg + '">!</span> ')
+                }
+            } else if (data.type === 9101) {
+                // 接收状态
+                var body = JSON.parse(data.body);
+                if (body.code != 200) {
+                    $('#' + data.id).before('<span class="send-status" title="' + body.msg + '">!</span> ')
+                }
+            }
+        }
+        //连接关闭的回调方法
+        websocket.onclose = function () {
+            console.log('close')
+        }
+        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
+        window.onbeforeunload = function () {
+            websocket.close();
+        }
+    }
+
+    function login() {
+        if (!$('#toUserId').val()) {
+            alert('请输入接收用户ID');
+            return;
+        }
+        if (!$('#clientName').val()) {
+            alert('请输入客户端名称')
+            return;
+        }
+        restAjax.get(restAjax.path('api/websocket/client/login/{clientName}', [$('#clientName').val()]), {}, null, function (code, data) {
+            var sessionId = data.data
+            $('#loginBtn').hide();
+            $('#closeBtn').show();
+            $('#clientName').attr('disabled', 'disabled');
+            $('#toUserId').attr('disabled', 'disabled');
+            $('#sendBox').show();
+            initWebSocket(sessionId);
+        }, function (code, data) {
+            alert(data.msg);
+        })
+    }
+
+    async function send() {
+        if (!websocket) {
+            alert('请开启WebSocket');
+            return;
+        }
+        // var sendId = new Date().getTime();
+        // var sendBody = {
+        //     id: sendId,
+        //     type: 5004,
+        //     from: $('#currentUserId').val(),
+        //     to: $('#toUserId').val(),
+        //     body: {
+        //         room: $('#txt_room').val()
+        //     }
+        // }
+        // websocket.send(JSON.stringify(sendBody));
+
+        // var player = new SrsRtcPlayerAsync();
+        // $('#rtc_media_player').prop('srcObject', player.stream);
+
+        // 'webtrc://192.168.0.106/1/123'
+        var pc = new RTCPeerConnection(null);
+        var stream = new MediaStream();
+        pc.ontrack = function(event) {
+            if (self.ontrack) {
+                self.ontrack(event);
+            }
+        };
+        pc.addTransceiver("audio", {direction: "recvonly"});
+        pc.addTransceiver("video", {direction: "recvonly"});
+        // // 创建offer
+        var offer = await pc.createOffer();
+        console.log(offer)
+        // // 设置offer
+        await pc.setLocalDescription(offer);
+
+        // 设置
+        var conf = {
+            api: 'https://192.168.0.106/rtc/v1/publish',
+            tid: Number(parseInt(new Date().getTime()*Math.random()*100)).toString(16).substr(0, 7),
+            streamurl: 'webtrc://192.168.0.106/1/123',
+            clientip: null,
+            sdp: offer.sdp
+        }
+
+        var session = await new Promise((resolve, reject) => {
+
+            $.ajax({
+                type: "POST", url: conf.api, data: JSON.stringify(conf),
+                contentType:'application/json', dataType: 'json'
+            }).done(function(data) {
+                console.log("Got answer: ", data);
+                if (data.code) {
+                    reject(data); return;
+                }
+
+                resolve(data);
+
+            }).fail(function(reason){
+                reject(reason);
+            });
+
+            // restAjax.post(conf.api, conf, null, function(code, data) {
+            //     if(data.code) {
+            //         reject(data);
+            //         return;
+            //     }
+            //     resolve(data);
+            // }, function(code, data) {
+            //     console.log(code, data);
+            //     reject(data);
+            // })
+        });
+        // 设置远程
+        await pc.setRemoteDescription(
+            new RTCSessionDescription({type: 'answer', sdp: session.sdp})
+        );
+        console.log(session)
+    }
+
+    function closeWebSocket() {
+        websocket.close();
+        $('#loginBtn').show();
+        $('#closeBtn').hide();
+        $('#clientName').removeAttr('disabled');
+        $('#toUserId').removeAttr('disabled');
+        $('#sendBox').hide();
+    }
+</script>
+</body>
+</html>
+