webSocket发送弹幕以及遇到的各种问题

最新推荐文章于 2022-12-04 18:23:25 发布

sunshine_程序媛

最新推荐文章于 2022-12-04 18:23:25 发布

阅读量2k

点赞数

分类专栏： webSocket java基础 js

java基础同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

webSocket

1 篇文章 0 订阅

订阅专栏

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://"+host+"/websocket");
}else{
    alert("Not Support WebSocket!");
}

//连接发生错误的回调方法
websocket.onerror = function(){
    setMessageInnerHTML("error");
};

//连接成功建立的回调方法
websocket.onopen = function(event){
    setMessageInnerHTML("open");
};

//接收到消息的回调方法
websocket.onmessage = function(){
    setMessageInnerHTML(event.data);
};

//连接关闭的回调方法
websocket.onclose = function(){
    setMessageInnerHTML("close");
};

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function(){
    websocket.close();
};

//将消息显示在网页上
function setMessageInnerHTML(innerHTML){
    $(".d_show").append("<div id='"+index+"'>"+ innerHTML + "</div>");
    launch();
}

//发送消息
function send(){
//var message = document.getElementById('text').value;
    var message = $(".s_text").val();
    $(".s_text").val("");
    websocket.send(message);
}

sendmessage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <base href="<%=basePath%>">
    <meta name="Keywords" content="danmu">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>弹幕网站</title>
    <style type="text/css">
        body {
            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;
            background: url(static/images/smartcommunity/mainbg.png);
            background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
        }
        .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: 10px;
            color: #fff;
        }
        /*end screen*/
        /*send start*/
        .send {
            width: 100%;
            height: 76px;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .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>
<a href="javascript:;" id="startDm">开启弹幕</a>
<!-- dm start -->
<div class="dm">
    <!-- d_screen start -->
    <div class="d_screen">
        <a href="javascript:;" class="d_del">X</a>
        <div class="d_mask"></div>
        <div class="d_show">
        </div>
    </div>
    <!-- end d_screen -->
    <!-- send start -->
    <div class="send">
        <div class="s_filter"></div>
        <div class="s_con">
            <input type="text" class="s_text" />
            <input type="button" value="发表评论" class="s_submit" id="btn"/>
        </div>
    </div>
    <!-- end send -->
</div>
<!-- end dm-->
<script type="text/javascript" src="plugins/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="static/websocket/websocket.js"></script>
<script type="text/javascript">
    $(function() {
        $("#startDm,.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();
            }
        });
    });
    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>

MyWebSocket.java

package com.hmkj.controller.smartcommunity;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

//每个客户端连接成功的时候在后台都会创建一个相应的MyWebsocket类
@Controller
@RequestMapping(value="/socketController")
@ServerEndpoint("/mywebsocket")
public class MyWebSocket {
    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
    private static CopyOnWriteArraySet<MyWebSocket> websocketPools = new CopyOnWriteArraySet<MyWebSocket>();

    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;

    @RequestMapping(value = "/viewsocket")
    public ModelAndView index() {
        ModelAndView mv = new ModelAndView();
        mv.setViewName("smartcommunity/mywebsocket/sendmessage");
        return mv;
    }

    /**
     * 连接建立成功调用的方法
     * @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        websocketPools.add(this);
    }

    @OnClose
    public void onClose() {
        websocketPools.remove(this);
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        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);

    }

    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println("发生错误");
        error.printStackTrace();
    }
}

请求http://localhost:8080/socketController/viewsocket

出现的问题：

1.WebSocket部署到服务器时，出现连接失败的问题

（1）在Tomcat8部署的项目中不需要导入catalina.jar和websocket-api.jar这两个包，这是由于Tomcat8自带有这两个包。再导入的话会jar包冲突。
（2）IP要写服务器的ip地址，不要写localhost.

websocket=new WebSocket("ws://192.168.0.215:9090/mywebsocket");

（3）调试远程服务器的webSocket程序时，要关闭本地的Tomcat服务器。（本文是tomcat服务的webSocket）

演示图

sunshine_程序媛

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录