基於websocket技術的網頁彈幕實現
阿新 • • 發佈：2019-01-05
前言：本彈幕是基於websocket技術實現的網頁彈幕，需要HTML5技術支援。具備如下功能：
1、開啟彈幕，從資料庫裡讀取歷史彈幕；
2、一個客戶端傳送彈幕，所有的客戶端均可以看到。
具體實現：
網頁端：
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request 這一段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("<div id='"+index+"'>"+ innerHTML.data + "</div>");
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.50.155:8080/Danmu01/websocket”，代表專案所在伺服器的ip地址+埠號+專案名+websocket，其中websocket對應服務端程式碼中@ServerEndpoint(“/websocket”)的websocket。
服務端程式碼：
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<MyWebsocket> websocketPools=new CopyOnWriteArraySet<MyWebsocket>();
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<String , Object> map = ServiceFactory.getIDanmuServiceInstance()
.list(1, 1000, "", "userNickname") ;
List<Danmu> list = (List<Danmu>) 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方法，也就有了一個新的session，也就執行了服務端的onOpen方法，所以，在服務端的onOpen方法中，就要將新的session加入到CopyWriteArraySet中，並且在此時要讀取資料庫中的歷史彈幕到前臺。所以在onOpen中呼叫了onMessage方法，將資料庫中的歷史彈幕資料呈現到前臺。這裡要注意一點是讀取歷史彈幕資料的時候要使用this.session.getBasicRemote().sendText(msg);
onMessage方法是有新彈幕資訊的時候自動呼叫的，這裡在onOpen方法中呼叫他是為了讓他讀出歷史彈幕資訊。onMessage中的for迴圈就是用來將一個客戶端傳送的新訊息推送到每一個session（即客戶端）。