将flask socketio消息添加到类

时间：2019-01-10 20:21:22

标签： javascript python jquery flask socket.io

伙计们，所以我在我的烧瓶应用程序中使用了socketio作为我的票务功能的一部分。首先让我向您展示应用程序在做什么以及我需要它在做什么。ticketing

从右边显示的非管理员用户上面的图片来看，可以发送一张新的票证，然后将其广播；但是只有管理员用户（显示在左侧）将可以查看故障单通知/阻止。这一切都很好，花花公子。现在，在管理员单击票证块之后，我希望该特定块显示一些文本，表明该票证正在由该管理员处理，并且我希望所有其他管理员都能看到此文本。我以为我要这样做的方法是使用socketio的功能，并在特定事件上广播该消息。但是问题在于，在类上发出消息会向具有该类的任何项目发出消息，而我不可能发生这种情况，它对于该块必须是唯一的。但是我可以将事件侦听器添加到每个项目的唯一方法是按类。希望这是有道理的。如果需要澄清，请告诉我。 这是套接字的JS代码。 

var minimize = document.getElementById('minimize');
var maximize = document.getElementById('maximize');
var exit = document.getElementById('messageexit');
var exitmin = document.getElementById('messageexitmin');
var maximum = document.getElementById('maxbox');
var minimum = document.getElementById('minbox');
var username = document.getElementById('un').innerHTML;

minimize.addEventListener('click', function(){
  maximum.style.display = 'none';
  minimum.style.display = 'block';
});

exit.addEventListener('click', function(){
  maximum.style.display = 'none';
  minimum.style.display = 'none';
})

exitmin.addEventListener('click', function(){
  maximum.style.display = 'none';
  minimum.style.display = 'none';
})

maximize.addEventListener('click', function(){
  maximum.style.display = 'block';
  minimum.style.display = 'none';
})

socket = io.connect('http://' + document.domain + ':' + location.port )

socket.on('connect', function(){
    socket.emit('connected', {data: username + " is connected"})
})

$('#submitform').on('submit', function(e){
  e.preventDefault()
  console.log('Testing my submit form')
  socket.emit('privateticket', {
    username : username, 
    ticket : $('#userticket').val(),
    site : document.getElementById('sitename').innerHTML
  })
  $('#userticket').val('')
  maximum.style.display = 'block'; 
  $('#messages').append('<div>' + "<span style='color:black'>" + username + '</span>' + ': ' + document.getElementById('userticket').innerHTML + '</div>')
})

socket.on('sendmessage', function(data){
  // console.log(data['username'])
  $('#nomess').remove()
  $('#queue').append("<div style='background-color:gray;height:150px;margin-right:2px;border-radius:5px; min-width:300px;' class='col-3 queueblock'>" + "<span style='color:black'>" + "<h1 style='color:white'>" + data['site'] + '</h1>' + data['username'] + '</span>' + ': ' + data['ticket'] + '</div>')
  $('.queueblock').on('click', function(){
    maxbox.style.display = 'block';
    socket.emit('techsticket', {
      username : username, 
    })
  })
});

socket.on('ticketaccepted', function(data){
  console.log(data['username'] + ' has taken this ticket.')
  $('.queueblock').append("<div>" + data['username'] + ' has taken this ticket.' +'</div>')
});

这是我的route.py中用于套接字操作的python代码。 

@socketio.on('connected')
def connected(data):
    print(data)
    user = Users.query.filter_by(username=current_user.username).first()
    user.sid = request.sid
    print(current_user.username + ' room sid is ' + request.sid)
    db.session.commit()


@socketio.on('privateticket')
def privaticket(data):
    print(str(data))
    socketio.emit('sendmessage', data, broadcast=True)

@socketio.on('techsticket')
def techsticket(data):
    print(data)
    socketio.emit('ticketaccepted', data, broadcast=True)

此处是html

（如果需要） 
{% block content %}
  <h1 id="titlecolor" style="font-weight:600; font-family: 'Staatliches', cursive;">{{ current_user.site }} Dash</h1> 
  </br>
  <div id="un" >{{current_user.username}}</div>
  <div id="sitename" style='display:none'>{{current_user.site}}</div>
<!-- Dashboard structure...================================================================================================================================================== -->
{% if current_user.adminstatus == False %}
    <div class="container">
        <div class="row">
            <!-- Shopping cart box ------------------------------------------------------------------>
            <div class="col-sm-3 dashy" style="box-shadow: 5px 10px 18px #888888 !important;">
                    <div class="hero-widget well well-sm">
                        <div class="icon">
                            <i class="glyphicon glyphicon-user"></i>
                        </div>
                        <div class="text">
                            <var>{{BADGE_LENGTH}}</var>
                            <label class="text-muted" style="font-weight:700">Shopping Cart</label>
                        </div>
                        <div class="options">
                            <a href="javascript:;" class="btn btn-primary btn-lg" style="font-weight: 600"><i class="glyphicon glyphicon-plus"></i>Checkout</a>
                        </div>
                    </div>
            </div>
            <!-- Notifications box ------------------------------------------------------------------->
            <div class="col-sm-3 dashy" style="box-shadow: 5px 10px 18px #888888 !important;">
                <div class="hero-widget well well-sm">
                    <div class="icon">
                        <i class="glyphicon glyphicon-star"></i>
                    </div>
                    <div class="text">
                        <var>5</var>
                        <label class="text-muted" style="font-weight:700">Notifications</label>
                    </div>
                    <div class="box">
                        <a href="javacsript:;" class="btn btn-default btn-lg"> View notifications</a>
                    </div>

                </div>
            </div>
            <!-- Total Orders box --------------------------------------------------------------------->
            <div class="col-sm-3 dashy" style="box-shadow: 5px 10px 18px #888888 !important;">
                <div class="hero-widget well well-sm">
                    <div class="icon">
                        <i class="glyphicon glyphicon-tags"></i>
                    </div>
                    <div class="text">
                        <var>00</var>
                        <label class="text-muted" style="font-weight:700">Total orders</label>
                    </div>
                    <div class="options">
                        <a href="javascript:;" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-search"></i> View orders</a>
                    </div>
                </div>
            </div>
            <!-- Quotes box --------------------------------------------------------------------------->
            <div class="col-sm-3 dashy" style="box-shadow: 5px 10px 18px #888888 !important;">
                <div class="hero-widget well well-sm">
                    <div class="icon">
                        <i class="glyphicon glyphicon-cog"></i>
                    </div>
                    <div class="text">
                        <label class="text-muted" style="font-weight:700">Quotes</label>
                    </div>
                    <div class="options">
                        <a href="javascript:;" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-wrench"></i> View</a>
                    </div>
                </div>
            </div>
            <!-- Pending Tickets box ------------------------------------------------------------------->
            <div class="col-sm-3 dashy" style="box-shadow: 5px 10px 18px #888888 !important; z-index:999;">
                <div class="hero-widget well well-sm">
                    <div class="icon">
                        <i class="glyphicon glyphicon-user"></i>
                    </div>
                    <div class="text">
                        <var>3</var>
                        <label class="text-muted" style="font-weight:700">Pending Tickets</label>
                    </div>
                    <div class="options">
                        <a href="javascript:;" class="btn btn-primary btn-lg" style="font-weight: 600" onclick="openForm()"><i class="glyphicon glyphicon-plus"></i> New Ticket</a>
                        <div class="form-popup" id="myForm">
                                <form id='submitform' method='POST' class="form-container">

                                    <label for="issue"><b>Issue Type</b></label>

                                    <div id="issue" class="custom-select" style="width:250px; z-index:999;">
                                        <select>
                                            <option value="0">Select:</option>
                                            <option value="1">Billing</option>
                                            <option value="2">Gift Card</option>
                                            <option value="3">CC Processing</option>
                                            <option value="4">Internet</option>
                                            <option value="5">LogMein</option>
                                            <option value="6">New Parts</option>
                                            <option value="7">Install</option>
                                            <option value="8">MyFocus</option>
                                            <option value="9">Term Down</option>
                                            <option value="10">System Down</option>
                                            <option value="11">Training</option>
                                            <option value="12">Other</option>
                                        </select>
                                    </div>
                                    </br>
                                    <label for="desc"><span class="descrippy">Description</span></label>
                                    <textarea class="desc-box" id="userticket" rows="4" cols="50" style="width: 250px"></textarea>
                                    <button type="submit" class="btn cancel" onclick="closeForm()">Submit</button> <!--Change event-->
                                </form>
                            </div>
                    </div>
                </div>
            </div>
            <!-- Contract info box ------------------------------------------------------->
            <div class="col-sm-3 dashy" style="box-shadow: 5px 10px 18px #888888 !important;">
                <div class="hero-widget well well-sm">
                    <div class="icon">
                        <i class="glyphicon glyphicon-star"></i>
                    </div>
                    <div class="text">
                        <label class="text-muted" style="font-weight:700">Contract Info</label>
                    </div>
                    <div class="options">
                        <a href="javascript:;" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-search"></i> View</a>
                    </div>
                </div>
            </div>
            <!-- Settings box ------------------------------------------------------------>
            <div class="col-sm-3 dashy" style="box-shadow: 5px 10px 18px #888888 !important;">
                <div class="hero-widget well well-sm">
                    <div class="icon">
                    <i class="glyphicon glyphicon-tags"></i>
                    </div>
                    <div class="text">
                        <label class="text-muted" style="font-weight:700">Settings</label>
                    </div>
                    <div class="options">
                    <a href="javascript:;" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-search"></i>Edit</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% else %}
    <h1>Queue</h1>
    <div class='row' id="queue"></div>
{% endif %}

{% endblock content %}

0 个答案:

没有答案
相关问题
最新问题