Websocketテクノロジーに基づくWeb弾幕実装
40356 ワード
前言:本弾幕はwebsocket技術に基づいて実現されたウェブ弾幕であり、HTML 5技術サポートが必要である.1、弾幕を開き、データベースから歴史弾幕を読み取る機能を備えている.2、1つのクライアントが弾幕を送信し、すべてのクライアントが見ることができる.
具体的な実装:Webページ:
index.jsp
このjspコードの部分は潭州学院Array先生の弾幕ページを参考にして、ここで感謝します.上のコードを調べるとwebsocketが設定されていることがわかります.jsのタイミングでjquery-1.11.1がロードする.min.js.次のjsファイルはネット上でダウンロードできますが、対応するパスの下に置けばいいです.Websocket.jsのコード.
websocket.js
Websocketを観察するjsは、開始時にWebsocketクラスがインスタンス化されていることがわかり、構築方法に伝達されるパラメータは「ws://192.168.5.155:8080/Danmu 01/websocket」であり、プロジェクトが存在するサーバのipアドレス+ポート番号+プロジェクト名+websocketを表し、websocketはサービス側コード中の@ServerEndpoint("/webssocket")のwebssocketに対応する.
サービス側コード:
サービス・エンド・コードを研究すると、初期にnewがCopyOnWriteArraySetを発見し、彼の汎用性を通じてwebsocketを保存していることがわかります.jsで新しいWebsocketオブジェクトの.クライアントが弾幕を開始するとwebsocketがトリガーされるのでjsにおけるonOpenメソッドには,新しいセッションがあり,サービス側のonOpenメソッドも実行されるので,サービス側のonOpenメソッドでは,新しいセッションをCopyWriteArraySetに追加し,その際にデータベース内の履歴を読み出してフロントに弾き出す.そこでonOpenでonMessageメソッドを呼び出し,データベース内の履歴弾幕データをフロントに提示する.ここで注意すべき点は、歴史的な弾幕データを読み取る際にthisを使用することである.session.getBasicRemote().sendText(msg); onMessageメソッドは、新しい弾幕情報があるときに自動的に呼び出されます.ここでonOpenメソッドで呼び出されたのは、歴史弾幕情報を読み出すためです.onMessageのforループは、1つのクライアントから送信された新しいメッセージを各セッション(すなわちクライアント)にプッシュするために使用される.
具体的な実装:Webページ:
index.jsp
page language="java" import="java.util.*" pageEncoding="UTF-8"%>
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<title>index.htmltitle>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
background: url(images/01.jpg); no-repeat top center; font-size: 12px;
font-family: " ";
}
* {
margin: 0;
padding: 0;
}
/* screen start*/
.screen {
width: 300px;
height: 100px;
background: #669900;
}
.dm {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
}
.dm .d_screen .d_del {
width: 38px;
height: 38px;
background: #600;
display: block;
text-align: center;
line-height: 38px;
text-decoration: none;
font-size: 20px;
color: #fff;
border-radius: 19px;
border: 1px solid #fff;
z-index: 2;
position: absolute;
right: 20px;
top: 20px;
outline: none;
}
.dm .d_screen .d_del:hover {
background: #F00;
}
.dm .d_screen .d_mask {
width: 100%;
height: 100%;
background: #000;
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
filter: alpha(opacity = 60);
z-index: 1;
}
.dm .d_screen .d_show {
position: relative;
z-index: 2;
}
.dm .d_screen .d_show div {
font-size: 26px;
line-height: 36px;
font-weight: 500;
position: absolute;
top: 76px;
left: 10;
color: #fff;
}
/*end screen*/
/*send start*/
.send {
width: 100%;
height: 76px;
position: absolute;
bottom: 0;
left: 0;
border: 1px solid red;
}
.send .s_filter {
width: 100%;
height: 76px;
background: #000;
position: absolute;
bottom: 0;
left: 0;
opacity: 0.6;
filter: alpha(opacity = 60);
}
.send .s_con {
width: 100%;
height: 76px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
text-align: center;
line-height: 76px;
}
.send .s_con .s_text {
width: 800px;
height: 36px;
border: 0;
border-radius: 6px 0 0 6px;
outline: none;
}
.send .s_con .s_submit {
width: 100px;
height: 36px;
border-radius: 0 6px 6px 0;
outline: none;
font-size: 14px;
color: #fff;
background: #65c33d;
font-family: " ";
cursor: pointer;
border: 1px solid #5bba32;
}
.send .s_con .s_submit:hover {
background: #3eaf0e;
}
/*end send*/
style>
head>
<body>
<form>
<a href="#" id="startDm"> a>
<div class="dm">
<div class="d_screen">
<a href="#" class="d_del">Xa>
<div class="d_mask">div>
<div class="d_show">
div>
div>
<div class="send">
<div class="s_filter">div>
<div class="s_con">
<input type="text" class="s_text" maxlength="30"/><input type="button"
value=" " class="s_submit" id="btn"/>
div>
div>
div>
form>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$(function() {
$("#startDm").click(function() {
$("#startDm,.dm").toggle(1000);
window.setTimeout(function(){
// reference to
var head = document.getElementsByTagName('head')[0];
// a new CSS
/* var css = document.createElement('link');
css.type = "text/css";
css.rel = "stylesheet";
css.href = "new.css"; */
// a new JS
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "websocket.js";
// preload JS and CSS
/* head.appendChild(css); */
head.appendChild(js);
// preload image
/* new Image().src = "new.png"; */
}, 1000) ;
/* window.setTimeout("document.getElementById('websocket').src='websocket + js.js'" , 1000) ; */
/* var websocket=null;
var _top=80;
var index=0;
var host=window.location.host;
// WebSocket
if('WebSocket' in window){
websocket=new WebSocket("ws://192.168.50.155:8080/Danmu01/websocket");
}
else{
alert("Not Support WebSocket!");
}
//
websocket.onerror = function(){
setMessageInnerHTML("error");
};
//
websocket.onopen = function(){
setMessageInnerHTML("open");
}
//
websocket.onmessage = function(event){
setMessageInnerHTML(event);
}
//
websocket.onclose = function(){
setMessageInnerHTML("close");
}
// ， ， websocket ， ，server 。
window.onbeforeunload = function(){
websocket.close();
}
//
function setMessageInnerHTML(innerHTML){
$(".d_show").append(""+ innerHTML.data + "");
launch();
}
//
function send(){
//var message = document.getElementById('text').value;
var message = $(".s_text").val();
alert(message);
websocket.send(message);
} */
//init_screen();
});
$(".d_del").click(function() {
$("#startDm,.dm").toggle(1000);
//init_screen();
});
$("#btn").click(function(){
send();
});
$(".s_text").keydown(function() {
var code = window.event.keyCode;
if (code == 13)// ，
{
send();
}
});
});
/* $("#startDm").click(function() {
alert("forEach^^^") ;
alert(" forEach " + ${danmu.danmuInfo}) ;
$(".d_show").append(""+ ${danmu.danmuInfo} + "");
}) ; */
function launch()
{
var _height = $(window).height();
var _left = $(window).width() - $("#"+index).width();
var time=10000;
if(index%2==0)
time=20000;
_top+=80;
if(_top>_height-100)
_top=80;
$("#"+index).css({
left:_left,
top:_top,
color:getRandomColor()
});
$("#"+index).animate({
left:"-"+_left+"px"},
time,
function(){});
index++;
}
/* //
function init_screen() {
var _top = 0;
var _height = $(window).height();
$(".d_show").find("div").show().each(function() {
var _left = $(window).width() - $(this).width();
var time=10000;
if($(this).index()%2==0)
time=20000;
_top+=80;
if(_top>_height-100)
_top=80;
$(this).css({
left:_left,
top:_top,
color:getRandomColor()
});
$(this).animate({
left:"-"+_left+"px"},
time,
function(){});
});
}
*/
//
function getRandomColor() {
return '#' + (function(h) {
return new Array(7 - h.length).join("0") + h
})((Math.random() * 0x1000000 << 0).toString(16))
}
script>
body>
html>
このjspコードの部分は潭州学院Array先生の弾幕ページを参考にして、ここで感謝します.上のコードを調べるとwebsocketが設定されていることがわかります.jsのタイミングでjquery-1.11.1がロードする.min.js.次のjsファイルはネット上でダウンロードできますが、対応するパスの下に置けばいいです.Websocket.jsのコード.
websocket.js
var websocket=null;
var _top=80;
var index=0;
var host=window.location.host;
// WebSocket
if('WebSocket' in window){
websocket=new WebSocket("ws://192.168.50.155:8080/Danmu01/websocket");/*("ws://"+host+"/Danmu/websocket");*/
}
else{
alert("Not Support WebSocket!");
}
//
websocket.onerror = function(){
setMessageInnerHTML("error");
};
//
websocket.onopen = function(){
setMessageInnerHTML("open");
}
//
websocket.onmessage = function(event){
setMessageInnerHTML(event);
}
//
websocket.onclose = function(){
setMessageInnerHTML("close");
}
// ， ， websocket ， ，server 。
window.onbeforeunload = function(){
websocket.close();
}
//
function setMessageInnerHTML(innerHTML){
$(".d_show").append(""+ innerHTML.data + "");
launch();
}
/*websocket.onmessage = function(msg) {
alert(msg.data);
setMessageInnerHTML(msg) ;
};*/
//
function send(){
//var message = document.getElementById('text').value;
var message = $(".s_text").val();
/*alert($(".s_text").val(""));
alert(message);*/
websocket.send(message);
}Websocketを観察するjsは、開始時にWebsocketクラスがインスタンス化されていることがわかり、構築方法に伝達されるパラメータは「ws://192.168.5.155:8080/Danmu 01/websocket」であり、プロジェクトが存在するサーバのipアドレス+ポート番号+プロジェクト名+websocketを表し、websocketはサービス側コード中の@ServerEndpoint("/webssocket")のwebssocketに対応する.
サービス側コード:
package com.danmu.websocket;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.concurrent.CopyOnWriteArraySet;
import com.deyao.danmu.pojo.*;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import com.deyao.danmu.factory.ServiceFactory;
@ServerEndpoint("/websocket")
public class MyWebsocket {
private static CopyOnWriteArraySet websocketPools=new CopyOnWriteArraySet();
private Session session;
boolean index = false ;
/**
*
* @param session 。session ，
*/
@OnOpen
public void onOpen(Session session) throws Exception{
this.session=session;
websocketPools.add(this);
index = true ;
onMessage("Welcome to DEYAO danmu ^_^" , this.session) ;
}
/**
*
*/
@OnClose
public void onClose(){
websocketPools.remove(this);
}
/**
*
* @param message
* @param session
*/
@OnMessage
public void onMessage(String message,Session session) throws Exception{
if (index) {
Map map = ServiceFactory.getIDanmuServiceInstance()
.list(1, 1000, "", "userNickname") ;
List list = (List) map.get("allDanmu01") ;
for(int i = 0 ; i < list.size() ; i++) {
String msg = list.get(i).getDanmuInfo() ;
this.session.getBasicRemote().sendText(msg);
System.out.println(msg);
}
index = false ;
} else {
Danmu danmu = new Danmu() ;
danmu.setDanmuInfo(message);
danmu.setUserId(null);
danmu.setUserNickname(null);
ServiceFactory.getIDanmuServiceInstance().insert(danmu);
}
for(MyWebsocket item:websocketPools) {
try {
item.send(message);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
private void send(String message) throws IOException{
this.session.getAsyncRemote().sendText(message);
//this.session.getBasicRemote().sendText(message);
}
/**
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
System.out.println(" ");
error.printStackTrace();
}
}
サービス・エンド・コードを研究すると、初期にnewがCopyOnWriteArraySetを発見し、彼の汎用性を通じてwebsocketを保存していることがわかります.jsで新しいWebsocketオブジェクトの.クライアントが弾幕を開始するとwebsocketがトリガーされるのでjsにおけるonOpenメソッドには,新しいセッションがあり,サービス側のonOpenメソッドも実行されるので,サービス側のonOpenメソッドでは,新しいセッションをCopyWriteArraySetに追加し,その際にデータベース内の履歴を読み出してフロントに弾き出す.そこでonOpenでonMessageメソッドを呼び出し,データベース内の履歴弾幕データをフロントに提示する.ここで注意すべき点は、歴史的な弾幕データを読み取る際にthisを使用することである.session.getBasicRemote().sendText(msg); onMessageメソッドは、新しい弾幕情報があるときに自動的に呼び出されます.ここでonOpenメソッドで呼び出されたのは、歴史弾幕情報を読み出すためです.onMessageのforループは、1つのクライアントから送信された新しいメッセージを各セッション(すなわちクライアント)にプッシュするために使用される.