基于webSocket通信的库主要有 socket.io，SockJS，这次用的是 SockJS。
这里我们使用sockjs-client、stomjs这两个模块，要实现webSocket通信，需要后台配合，也使用相应的模块。
1、sockjs-client
sockjs-client是从SockJS中分离出来的用于客户端使用的通信模块，所以我们就直接来看看SockJS。SockJS是一个浏览器的JavaScript库，它提供了一个类似于网络的对象，SockJS提供了一个连贯的、跨浏览器的JavaScriptAPI，它在浏览器和Web服务器之间创建了一个低延迟、全双工、跨域通信通道。你可能会问，我为什么不直接用原生的WebSocket而要使用SockJS呢？这得益于SockJS的一大特性，一些浏览器中缺少对WebSocket的支持，因此回退选项是必要的，而Spring框架提供了基于SockJS协议的透明的回退选项。SockJS提供了浏览器兼容性，优先使用原生的WebSocket，如果某个浏览器不支持WebSocket，SockJS会自动降级为轮询。
2、stomjs
STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的简单文本协议，WebSocket是一个消息架构，不强制使用任何特定的消息协议，它依赖于应用层解释消息的含义。与HTTP不同，WebSocket是处在TCP上非常薄的一层，会将字节流转化为文本/二进制消息，因此，对于实际应用来说，WebSocket的通信形式层级过低，因此可以在 WebSocket 之上使用STOMP协议，来为浏览器 和 server间的通信增加适当的消息语义。
STOMP与WebSocket 的关系:
HTTP协议解决了web浏览器发起请求以及web服务器响应请求的细节,假设HTTP协议不存在,只能使用TCP套接字来编写web应用,你可能认为这是一件疯狂的事情
直接使用WebSocket(SockJS)就很类似于使用TCP套接字来编写web应用,因为没有高层协议,就需要我们定义应用间发送消息的语义,还需要确保连接的两端都能遵循这些语义;
同HTTP在TCP套接字上添加请求-响应模型层一样,STOMP在WebSocket之上提供了一个基于帧的线路格式层,用来定义消息语义.
3、代码实现：
先安装 sockjs-client 和 stompjs
npm install sockjs-client
npm install stompjs
简单代码：
<script>
import SockJS from 'sockjs-client'
import Stomp from 'stompjs'
import { getLiveUrlApi, getLiveEventDetailApi } from '@/apis'
import { mapGetters } from 'vuex'
import { picklist, isWinxin, isMobile, initWxShare } from '@/utils'
import Emoji from './emoji'
export default {
data () {
return {
stompClient: '',
timer: '',
player: null,
pkl: picklist,
danmukuList: [],
barrageInfo: {
text: ''
},
total: 0,
eventInfo: {
endTime: '',
speakers: [{}]
},
emojiShow: false,
noticeShow: false,
sharehref: '',
isWeixinBrowser: isWinxin(),
isMobileBrowser: isMobile()
}
},
computed: {
...mapGetters(['token', 'userInfo', 'isSys', 'permissions']),
isAdmin () {
// sys、活动管理员、已报名且在直播的普通用户
return this.isSys || (this.eventInfo.ticketStatus === 2 && this.eventInfo.liveStatus === 1) || this.permissions.includes('event')
}
},
components: {
Emoji
},
methods: {
getEvent () {
getLiveEventDetailApi(this.$route.params.id).then(res => {
if (res.status === 200) {
this.eventInfo = res.data
if (this.isWeixinBrowser) {
this.initShare()
}
if (this.isAdmin) {
this.fetchData()
}
}
})
},
fetchData () {
getLiveUrlApi(this.$route.params.id).then(res => {
if (res.status === 200) {
this.aliPlay(res.data)
}
})
},
// 阿里云视频直播
aliPlay (source) {
let _videoDom = document.getElementById('aliVedio')
let _ch = _videoDom.clientHeight / 2 - 32
let _cw = _videoDom.clientWidth / 2 - 32
this.player = new Aliplayer({
id: 'aliVedio',
'100%',
source: source,
autoplay: true,
isLive: true,
rePlay: false,
playsinline: true,
preload: true,
controlBarVisibility: 'hover',
useH5Prism: true,
enableStashBufferForFlv: false,
stashInitialSizeForFlv: 32,
skinLayout: [
{
'name': 'bigPlayButton',
'align': 'blabs',
'x': _cw,
'y': _ch
},
{
'name': 'controlBar',
'align': 'blabs',
'x': 0,
'y': 0,
'children': [
{
'name': 'liveDisplay',
'align': 'tlabs',
'x': 15,
'y': 6
},
{
'name': 'fullScreenButton',
'align': 'tr',
'x': 10,
'y': 14
},
{
'name': 'volume',
'align': 'tr',
'x': 5,
'y': 13
}
]
}
],
components: [{
name: 'AliplayerDanmuComponent',
type: AliPlayerComponent.AliplayerDanmuComponent,
args: [this.danmukuList]
}]
}, function (player) {
player._switchLevel = 0
})
},
// 连接后台
connection () {
let that = this
// 建立连接对象
let sockUrl = '/api/event-websocket?token=' + this.token.substring(7) + '&eventId=' + this.$route.params.id
let socket = new SockJS(sockUrl)
// 获取STOMP子协议的客户端对象
this.stompClient = Stomp.over(socket)
// 定义客户端的认证信息,按需求配置
let headers = {
Authorization: ''
}
// 向服务器发起websocket连接
this.stompClient.connect(headers, (res) => {
// 订阅服务端提供的某个topic
this.stompClient.subscribe('/topic/event/' + this.$route.params.id, (frame) => {
that.addBarage(JSON.parse(frame.body))
})
that.sentFirst()
}, (err) => {
console.log('失败：' + err)
})
this.stompClient.debug = null
},
// 断开连接
disconnect () {
if (this.stompClient) {
this.stompClient.disconnect()
}
},
// 初始化websocket
initWebSocket () {
this.connection()
let that = this
// 断开重连机制,尝试发送消息,捕获异常发生时重连
this.timer = setInterval(() => {
try {
that.stompClient.send('connect-test')
} catch (err) {
console.log('断线了: ' + err)
that.connection()
}
}, 5000)
},
// 用户加入发送弹幕
keyDown (e) {
if (e.keyCode === 13) {
if (e.preventDefault) {
e.preventDefault()
} else {
window.event.returnValue = false
}
this.sentBarrage()
}
},
sentBarrage () {
this.emojiShow = false
if (this.barrageInfo.text === '' || this.barrageInfo.text === '
') {
this.barrageInfo.text = ''
return false
}
let that = this
this.barrageInfo.eventId = this.eventInfo.id
this.barrageInfo.name = this.userInfo.account
this.barrageInfo.role = this.userInfo.roleName
if (this.permissions.length > 0) {
this.barrageInfo.role = 'admin'
}
this.barrageInfo.headimgurl = this.userInfo.headimgurl
let reg = /#[u4E00-u9FA5]{1,4};/gi
this.barrageInfo.comment = this.barrageInfo.text
if (reg.test(this.barrageInfo.text)) {
this.barrageInfo.text = this.barrageInfo.text.replace(reg, '')
}
this.stompClient.send(
'/msg',
{},
JSON.stringify(that.barrageInfo)
)
this.barrageInfo.text = ''
},
// 连接建立，首次发送消息
sentFirst () {
let that = this
this.barrageInfo.eventId = this.eventInfo.id
this.barrageInfo.name = this.userInfo.account
this.barrageInfo.role = this.userInfo.roleName
if (this.permissions.length > 0) {
this.barrageInfo.role = 'admin'
}
this.barrageInfo.headimgurl = this.userInfo.headimgurl
this.stompClient.send(
'/msg',
{},
JSON.stringify(that.barrageInfo)
)
},
// 添加弹幕内容
addBarage (content) {
// 推送直播状态修改页面
if (content.live) {
if (this.isSys || this.permissions.includes('event')) {
return
}
this.getEvent()
}
if (content.onlineCount) {
this.total = content.onlineCount
}
let _obj = {
'mode': 1,
'stime': 1000
}
content = Object.assign(_obj, content)
this.danmukuList.push(content)
this.$nextTick(() => {
let barrage = document.getElementById('barrage')
barrage.scrollTop = barrage.scrollHeight
})
},
// 将匹配结果替换表情图片
emotion (res) {
let word = res.replace(/#|;/gi, '')
const list = [
'微笑', '咧嘴笑', '破涕为笑', '汗', '眯眼', '晕', '害羞', '放电',
'亲亲', '得意', '惊恐', '眼泪', '酷', '色', '吐舌', '害羞笑',
'赞', '同意', '拍手', '鼓掌', '红唇', '冷', '夜晚', '少儿不宜',
'强壮', '浪', '太阳', '香蕉', '举杯', '国旗', '心动', '奶牛',
'恶魔', '礼物', '鸡腿', '玫瑰', '西红柿', '茄子', '西瓜', '草莓'
]
let index = list.indexOf(word)
return `<img src="https://cdn.enmotech.com/attach/twemoji/${index}.png" align="middle" width="28px">`
},
setEmoji (arg) {
this.barrageInfo.text += arg
},
// 微信分享
initShare () {
let _obj = {
title: '活动直播：' + this.eventInfo.title,
img: 'https://cs.enmotech.com/image/event/event_1556264441839.png',
desc: '我正在观看' + this.eventInfo.speakers[0].name + '的直播：《' + this.eventInfo.title + '》，快来围观吧！'
}
initWxShare(_obj)
}
},
mounted () {
this.sharehref = location.href
this.getEvent()
this.initWebSocket()
},
beforeDestroy () {
if (this.player) {
this.player.dispose()
this.player = null
}
// 页面离开时断开连接,清除定时器
this.disconnect()
clearInterval(this.timer)
}
}
</script>