Docker部署 直播实时弹幕+聊天室 vue+websocket+spring-boot

Docker部署 实现弹幕+聊天室 vue+websocket+spring-boot

Docker 部署 实现直播后续
参考文章 https://blog.csdn.net/qq_36710522/article/details/90547819
https://blog.csdn.net/qq_36710522/article/details/97103229

做了一些小修改

首先从弹幕功能开始

vue实现弹幕功能很简单，有一个插件叫vue-baberrage，我们只需要安装这个插件就能实现弹幕

cnpm i vue-baberrage

main.js加入

import {
    vueBaberrage } from 'vue-baberrage'
Vue.use(vueBaberrage);

界面

<vue-baberrage
		:isShow="barrageIsShow"
		:barrageList="barrageList"
		:maxWordCount="maxWordCount"
		:throttleGap="throttleGap"
		:loop="barrageLoop"
		:boxHeight="boxHeight"
		:messageHeight="messageHeight"
		:boxWidth="boxWidth-300"
		>
	</vue-baberrage>
<i-input v-model="sendmsg" placeholder="请输入..." style="width: 300px"></i-input>
<i-button type="primary" @click="addToList(2)">发送弹幕</i-button>
import {
    MESSAGE_TYPE } from 'vue-baberrage'
			this.barrageList.push({
   //把数据加进去就可以了
          		id: ++this.currentId,
          		avatar: this.msgHeadImageURL,
          		msg: messageData.chatContent,
          		barrageStyle: "normal",
          		time: 5,
          		type: MESSAGE_TYPE.NORMAL,
          		position: "bottom"
          	});

然后是聊天室

聊天室需要websocket来实现，后端我用的spring-boot 搭建比较快捷

先是前端页面

<template>    
	<div>         
		WebSocket//这是一个样例
	</div>    
</template>
<script>
export default {
           
	created() {
    
		this.initWebSocket(); //进入页面开始初始化websocket建立连接      
	},        
	destroyed() {
   
		this.websocketclose(); //离开页面断开连接       
	},        
	methods: {
               
		initWebSocket() {
                   
			// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https                
			this.websock = new WebSocket("wss://localhost"); //这里是websocket服务地址，这里的地址可以前端根据后台地址参数规则拼成，也可以向后端请求         
			this.websock.onopen = this.websocketonopen;                
			this.websock.onerror = this.websocketonerror;                
			this.websock.onmessage = this.websocketonmessage;                
			this.websock.onclose = this.websocketclose;              
		},              
		websocketonopen() {
                   
			console.log("WebSocket连接成功");              
		},              
		websocketonerror(e) {
                   
			console.log("WebSocket连接发生错误");              
		},              
		websocketonmessage(e) {
                   
			console.log(e.data);                // console.log(e);              
		},              
		websocketclose(e) {
                   
			console.log("connection closed (" + e.code + ")");              
		},              
	 }    
}
</script>

页面源码

<template>
  <div>

    <div  class="barrages-drop">
      <video
      id="videoId"
      controls = "true"
      :height="boxHeight+350"
      :width="boxWidth">
    </video>
    <vue-baberrage
    :isShow="barrageIsShow"
    :barrageList="barrageList"
    :maxWordCount="maxWordCount"
    :throttleGap="throttleGap"
    :loop="barrageLoop"
    :boxHeight="boxHeight"
    :messageHeight="messageHeight"
    :boxWidth="boxWidth-300"
    >
  </vue-baberrage>
  <Card style="float: right;height: 500px;width: 500px;">
    <Scroll  height="450">
  <ul v-for="item in msgs">
  <li>{
   {
   item.chatAvatar}}　　　{
   {
   item.chatTime}}</li>
  <li>　　{
   {
   item.chatContent}}</li>
</ul>
</Scroll>
  <p  ><i-input v-model="sendmsg" placeholder="请输入..." style="width: 300px"></i-input>
<i-button type="primary" @click="addToList(1)">发送消息</i-button></p>
</Card>
</div>

<i-input v-model="sendmsg" placeholder="请输入..." style="width: 800px"></i-input>
<i-button  type="primary" @click="addToList(2)">发送弹幕</i-button>

<p>当前在线：{
   {
   onlineNumber}}</p>
<div v-for="item in onlineUserList">
  <p>{
   {
   item}}</p>
</div>
</div>
</template>
<script>
  import {
    onlineList } from '@/api/data'
  import {
    MESSAGE_TYPE } from 'vue-baberrage'
  export default {
   
    name: 'level_2_1',
    data () {
   
      return