我刚开始使用Web套接字，我继续运行websocket服务器并使用index.html中的客户端调用它。
服务器返回视频链接的json，我想在客户端页面上显示该视频。
当我将此index.html作为客户端运行（调用下面给出的javascript）时，它会继续在click事件上编写$('.pixabay-images').append(pixabay_content) rathen。
作为回应，我收到链接，我放在视频显示中，但它没有显示任何内容。
Console.log（）显示收到的回复：
{"video_link": [{"url": "https://www.youtube.com/embed/QcIy9NiNbmo", "title": "Taylor Swift - Bad Blood ft. Kendrick Lamar"}, {"url": "https://www.youtube.com/embed/B5nPN9B3c5w", "title": "My Favourite Animal | Dialogue Promo 4 | Sardaarji | Diljit Dosanjh | Jaswinder Bhalla"}, {"url": "https://www.youtube.com/embed/_VLpkuU7pNg", "title": "Veervaar | Sardaarji | Diljit Dosanjh | Neeru Bajwa | Mandy Takhar | Releasing 26th June"}, {"url": "https://www.youtube.com/embed/pY6cQTyk5oY", "title": "Here Comes Vinnie | Disney's ABCD 2 | Shraddha Kapoor"}, {"url": "https://www.youtube.com/embed/XZCHyUpxfNA", "title": "YTV: Delhi on Sex Ed., Parents, Porn & Condoms Etc."}, {"url": "https://www.youtube.com/embed/j1uy3TlanSk", "title": "Visa | Sharry Maan | Full Official Video | Yaar Anmulle Records 2015"}, {"url": "https://www.youtube.com/embed/YzF0e304rbU", "title": "GUJJU DIL DHADAKNE DO"}, {"url": "https://www.youtube.com/embed/8Fr_qNbCy8Y", "title": "This Dubsmash By Instagram Girl Will Leave You Stunned - She Is Awesome"}, {"url": "https://www.youtube.com/embed/e7VkRj_KYI4", "title": "\"\\u0932\\u0935\\u0932\\u0940 \\u0906\\u0917\\u0902\\u0924\\u0941\\u0915\" | Lovely Visitor Ke Sath Romance | HINDI HOT SHORT MOVIES/FILM"}, {"url": "https://www.youtube.com/embed/jyNdlcLlCN0", "title": "Lana kisses Dolph Ziggler: Raw, May 18, 2015"}, {"url": "https://www.youtube.com/embed/bV2GklFBaT8", "title": "Happy B'day | ABCD 2 | Varun Dhawan - Shraddha Kapoor | Sachin - Jigar | D. Soldierz"}, {"url": "https://www.youtube.com/embed/66q2fmLWMCI", "title": "Hamari Adhuri Kahani - Hasi Song Video | Emraan | Vidya"}, {"url": "https://www.youtube.com/embed/9ZsRQNUQ8Vo", "title": "Blank Space | Mental Manadhil Mashup - Vidya"}, {"url": "https://www.youtube.com/embed/VLf_wVp_KXI", "title": "Premam - Malayalam Movie Song - Ithu Puthan Kalam | Nivin Pauly , Alphonse Puthren , Anwar Rasheed |"}, {"url": "https://www.youtube.com/embed/s7sSjAwORp0", "title": "Baahubali Jukebox | Prabhas, Anushka Shetty, Rana Daggubati, Tamannaah Bhatia"}, {"url": "https://www.youtube.com/embed/gcQKclaZ0UI", "title": "Uppu Karuvadu official Teaser"}, {"url": "https://www.youtube.com/embed/TENkHYWYnAc", "title": "Hindi Movie | Shola Bai | Sapna, Amit Pachori | Hot Scene"}, {"url": "https://www.youtube.com/embed/zF6sF85yV9s", "title": "'Selfie Le Le Re' VIDEO Song | Bajrangi Bhaijaan | Salman Khan | T-Series"}, {"url": "https://www.youtube.com/embed/AuuX2j14NBg", "title": "Drishyam - Official Trailer | Starring Ajay Devgn, Tabu & Shriya Saran"}, {"url": "https://www.youtube.com/embed/VzjU3GF9ZBs", "title": "Kaisi Yeh Yaariaan - Episode 221"}, {"url": "https://www.youtube.com/embed/d5y2MJEUtQM", "title": "New Punjabi Songs 2015 | DENGU VS PENDU | MANPREET GILL feat. RUHANI SHARMA | Punjabi Songs 2015"}, {"url": "https://www.youtube.com/embed/_VDqTzzh7So", "title": "Meri Aashiqui Tum Se Hi - 12th June 2015 - \\u092e\\u0947\\u0930\\u0940 \\u0906\\u0936\\u093f\\u0915\\u0940 \\u0924\\u0941\\u092e \\u0938\\u0947 \\u0939\\u0940 - Full Episode (HD)"}, {"url": "https://www.youtube.com/embed/a23GO0NXOtg", "title": "Katti Batti Trailer | Imran Khan & Kangana Ranaut | In Cinemas Sept.18"}, {"url": "https://www.youtube.com/embed/Ef27m5ocK6Q", "title": "ANOUK - BOLD IS BEAUTIFUL | THE VISIT"}, {"url": "https://www.youtube.com/embed/mU9CB5nut1Y", "title": "Bollywood Actress Rekha Hot Bed Room Scene"}, {"url": "https://www.youtube.com/embed/QuRSCU0tOKs", "title": "Brothers Official Trailer | Akshay Kumar, Sidharth Malhotra, Jackie Shroff and Jacqueline Fernandez"}, {"url": "https://www.youtube.com/embed/sOEg_YZQsTI", "title": "Baahubali Trailer || Prabhas, Rana Daggubati, Anushka, Tamannaah || Bahubali Trailer"}]}
display.js
$(document).ready(function(){
if (!("WebSocket" in window)) {
alert("Your browser does not support web sockets");
}else{
setup();
createWebSocket();
}
function showServerResponse(response){
console.log(response )
var pixabay_content = ''
pixabay_content += '<br><b>Todays Trending Youtube videos </b><br><br>'
pixabay_content += '<ul class="rig columns-2">'
count = 1
for(x in response['video_link'])
{
console.log(response['video_link'][x])
//pixabay_content += '<li> <img src="' + response['video_link'][x]+'" /> </li>'
pixabay_content +='<li> <iframe width="420" height="345" padding="5px" src="'+response['video_link'][x]['url']+'" frameborder="0" allowfullscreen></iframe></li>'
if (count >= 4) {
break
}
count = count + 1
}
pixabay_content += '</ul>'
$('.pixabay-images').append(pixabay_content)
}
var connection;
var myInterval;
var host = "ws://192.168.1.141:8888/ws";
// event handlers for websocket
var attempts = 1;
function createWebSocket () {
connection = new WebSocket("ws://localhost:8888/ws");
connection.onopen = function () {
// reset the tries back to 1 since we have a new connection opened.
attempts = 1;
// ...Your app's logic...
}
connection.onmessage = function(msg){
showServerResponse(msg.data);
}
connection.onclose = function () {
var time = generateInterval(attempts);
showServerResponse("The connection has been closed.");
console.log(time)
setTimeout(function () {
// We've tried to reconnect so increment the attempts by 1
attempts++;
// Connection has closed so try to reconnect every 10 seconds.
createWebSocket();
}, time);
}
}
function generateInterval(k) {
return 2000;
}
function setup(){
var $txt = $("#data");
var $btnSend = $("#sendtext");
$txt.focus();
// event handlers for UI
$btnSend.on('click',function(){
var text = $txt.val();
if(text == ""){
return;
}
connection.send(text);
$txt.val("");
});
$txt.keypress(function(evt){
if(evt.which == 13){
$btnSend.click();
}
});
}
});
的index.html：
<!DOCTYPE html>
<html>
<head>
<title>WebSockets Client</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://192.168.1.141/js/display.js"></script>
</head>
<body>
<!--Enter text to send to the websocket server:-->
<div id="send">
<input type="text" id="data" size="100"/><br>
<input type="button" id="sendtext" value="send text"/>
<div class="pixabay-images">
</div>
</div>
<div id="output"></div>
</body>
</html>