netty学习笔记（三）实现图文直播

前言

  在前面两篇，已经介绍了netty基础以及相关实践，今天我们来看下我大学期间完成的netty图文直播功能，当然其中也不乏在网上抄抄改改，这叫借鉴~

图文直播

  很久之前使用socket来实现，当然很多公司也是在用这个去实现客服系统。今天我们搞点netty 778.

上代码

服务端

1.配置相关配置，以及启动

2.我们来看下childHandler里头有哪些handler

3.储存各类Channel

4.处理socket各种逻辑

使用map来管理直播间对应的channelGroup

5.核心处理逻辑

握手的逻辑就不展示处理了，下面展示处理websocket业务逻辑

6.wesocket处理逻辑
6.1用户已经加入直播间执行的逻辑，也就是data有值
其实这里不太好的地方是：上传的图片应该是先上传服务器，返回url，再通过url发送netty到直播间里头。

6.2 下面的注释写错了，这一块是用户第一次请求加入直播间，并没有传入直播间号跟数据，所以我们将它的channel加入channelGroup里面，方便后面通过channelGroup广播消息。

客户端

由于是html的，so

<script type="text/javascript">
        var arr = ["大鸡腿", "123", "我是好人", "班主任", "小贱贱"
        ];
        var index = Math.floor((Math.random() * arr.length));
        var name = arr[index];
        var socket;
        if (!window.WebSocket) {
            window.WebSocket = window.MozWebSocket;
        }

        if (window.WebSocket) {
            socket = new WebSocket("ws://localhost:8888/websocket");
            socket.onmessage = function (event) {
                var ta = document.getElementById('responseContent');
                console.log(event);
                var fdStart = event.data.indexOf("http://");
                if (fdStart == 0) {
                    /*var str='';
                    str+='
'+
                        '
'+
                        '
'+
                        '
';
                    $('.newsList').append(str);
                    $('.responseContent').scrollTop($('.responseContent')[0].scrollHeight );*/
                    var img = new Image();
                    img.onload = function () {
                        alert("img is loaded")
                    };
                    img.onerror = function () {
                        alert("error!")
                    };
                    img.src = event.data;
                    img.width = 200;
                    img.height = 200;

                    function show() {
                        alert("body is loaded");
                    };
                    $('.newsList').append(img);
                    $('#responseContent').scrollTop($('#responseContent')[0].scrollHeight);
                    return;
                } else if (fdStart == -1) {

                }
                var str = '';
                str += '
' +
                    '
' + event.data + '
' +
                    '
';
                $('.newsList').append(str);
                //ta.value += event.data + "\r\n";
            };

            socket.onopen = function (event) {
                var str = '';
                str += '
' +
                    '
你当前的浏览器支持WebSocket,请进行后续操作
' +
                    '
';
                $('.newsList').append(str);
                var jsObj = {};
                jsObj.name = name;
                jsObj.homeid = '1';
                jsObj.count = 'true';
                var str = JSON.stringify(jsObj);
                send(str);
            };

            socket.onclose = function (event) {
                var str = '';
                str += '
' +
                    '
WebSocket连接已经关闭
' +
                    '
';
                $('.newsList').append(str);
            };
        } else {
            alert("您的浏览器不支持WebSocket");
        }


        function send(message) {
            if (!window.WebSocket) {
                return;
            }
            if (socket.readyState == WebSocket.OPEN) {
                socket.send(message);
            } else {
                alert("WebSocket连接没有建立成功！！");
            }
        }

        function sendMsg(message) {
            var jsObj = {};
            jsObj.name = name;
            jsObj.homeid = '1';
            jsObj.count = 'false';
            jsObj.msg = message;
            var str = JSON.stringify(jsObj);
            console.log(str);
            send(str);
        }

        function changepic() {
            var files = document.getElementById('file').files;
            if (!files.length) {
                alert('Please select a file!');
                return;
            }
            var file = files[0];
            var reader = new FileReader();
            var jsObj = "1";
            reader.onload = function () {
                send(jsObj+this.result);
            };
            reader.readAsDataURL(file);
            var file = document.getElementById('file');
            file.value = ''; //虽然file的value不能设为有字符的值，但是可以设置为空值
//或者
            file.outerHTML = file.outerHTML;
        }
    </script>

<form onSubmit="return false;">
    <input type="text" name="message" value=""/>
    <br/><br/>
    <input type="button" value="发送WebSocket请求消息" onClick="sendMsg(this.form.message.value)"/>
    <input type="file" id="file" class="filepath" onchange="changepic(this)"
           accept="image/jpg,image/jpeg,image/png,image/PNG">
    <hr color="red"/>
    <h2>客户端接收到服务端返回的应答消息</h2>
    <div class="conRight">
        <div id="responseContent" style="width:1024px; height:300px ;border:1px solid #F00">
            <ul class="newsList">

            </ul>
        </div>
    </div>
</form>

github

• dajitui/netty-