websocket
这篇总结主要介绍一下websocket
常见的消息推送方案
1.轮询
2.长轮询
3.SSE
4.websocket
轮询方式
轮询：指的是浏览器以指定的时间间隔向服务器发出http请求，服务器实时返回数据给浏览器
长轮询：浏览器发出ajax请求，服务器端接收请求后，如果没有数据，则会阻塞请求直到有数据或者超时才会返回
SSE(server-sent event)：服务器发送事件
1.SSE在服务器和客户端之间打开了一个单项通道，是服务器给浏览器的
2.服务器响应的不再是一次性的数据包，即不是把数据一次性返回回来，而是text/event-stream类型的数据流信息
3.服务器有数据变更时将以数据流式传输到客户端（数据流式指的就是有源源不断的数据从服务器响应给客户端）
websocket
1.websocket介绍
是什么？websocket是一种基于TCP连接上进行全双工协议
什么是全双工协议？：允许数据在两个方向上同时传输
什么是半双工协议？：允许数据在两个方向上传输，但是同一个时间段内只允许一个方向上传输
2.websocket原理
浏览器给服务器发送http的协议请求，这个请求头中带有UPgrade.websocket，要求将协议升级为websocket协议。
服务器响应头中的响应状态码为101 Switching Protocls，此时就将http协议转换为websocket协议了。
再让浏览器发送下一次请求时开始，都是发送的websocket协议的请求了
3.浏览器websocket API (即前端应该怎么做？)
1.websocket 相关事件
open事件 ws.onopen 连接建立时触发
message事件 ws.onmessage 浏览器接收到服务器发送的数据时触发
close事件 ws.onclose 连接关闭时触发
error事件 ws.onerror 在WebSocket连接发生错误时触发。
2.websocket 对象提供的方法
send(数据) 通过websocket对象调用该方法发送数据给服务器
3.步骤：
1.创建websocket对象
let ws = new WebSocket(URL)
ws.onopen = function(){
//连接建立时给个消息提示
}
document.querySelector('#btn1').onclick = function () {
//拿到点击后输入框数据
let msg = document.querySelector('input').value
// 发送消息，调用ws对象的send方法，发送输入框数据
ws.send(msg)
//渲染页面
content.innerHTML += `用户：${msg} <br>`
}
ws.onmessage = function(evt){
//通过evt.data可以获取服务器发送的数据。同时通过evt.data渲染数据
}
ws.onclose = function(){
//连接关闭时给个消息提示
}URL这个参数该如何去写？
格式：协议://ip地址/访问路径
协议：协议名应为ws
4.原生js实现机器人客服
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div class="box">
<input type="text" placeholder="请输入聊天内容" />
<button id="btn1">发送消息</button>
<button id="btn2">退出聊天室</button>
<div class="content"></div>
</div>
<script>
let content = document.querySelector('.content')
// 1.与服务器进行WebSocket链接
// wss://echo.websocket.org : 这个接口你给它发什么，它就回复你什么
const ws = new WebSocket('ws://echo.websocket.org') // 建立与服务端地址的连接
// 2.连接成功回调
ws.onopen = function () {
// 如果执行此函数 表示与服务器建立关系成功
content.innerHTML += '提示：<p style="color:red">websockt链接成功</p>'
}
//3.发送消息
document.querySelector('#btn1').onclick = function () {
console.log(1111)
let msg = document.querySelector('input').value
// 发送消息
ws.send(msg)
//渲染页面
content.innerHTML += `用户：${msg} <br>`
}
//4.接收消息
ws.onmessage = function (event) {
// event中的data就是服务器发过来的消息
console.log(event);
content.innerHTML += `服务器：${event.data} <br>`
}
//5.关闭连接
document.querySelector('#btn2').onclick = function () {
ws.close()
}
//6.成功关闭链接回调
ws.onclose = function () {
// 关闭连接成功
content.innerHTML += '提示：<p style="color:red">websockt关闭成功</p>'
}
</script>
</body>
</html>5.vue中如何使用？
下载：使用vue ui安装，或npm i socket.io-client
1.连接服务器
const socket = io('http://118.24.62.36:8888')- 机器人聊天客服的网址是：http://118.24.62.36:8888
2.连接成功回调
socket.on('connect', () => { console.log('建立连接成功了') })- 3.接收服务器消息 - ```javascript socket.on('message', msg => {})
4.给服务器发消息
socket.emit('message', { // 消息 msg: '消息内容', // 时间戳 timestamp: Date.now() })- 5.断开链接 - ```javascript socket.disconnect()
<template>
<div class="student-container">
<van-nav-bar
fixed
left-arrow
@click-left="$router.back()"
title="机器人"
></van-nav-bar>
<div class="chat-list">
<template v-for="item in message">
<!-- 左侧是机器人 -->
<div
class="chat-item left"
:key="item.timestamp"
v-if="item.isStu === true"
>
<van-image fit="cover" round :src="littleQ" />
<div class="chat-pao">{{ item.msg }}</div>
</div>
<!-- 右侧是当前用户 -->
<div class="chat-item right" :key="item.timestamp" v-else>
<div class="chat-pao my">{{ item.msg }}</div>
<van-image fit="cover" round :src="self" />
</div>
</template>
</div>
<div class="reply-container van-hairline--top">
<van-search v-model.trim="word" placeholder="说点什么..." @search="send">
</van-search>
</div>
</div>
</template>
<script>
// 导入精美的图片
import littleQ from '@/assets/student.jpg'
import self from '@/assets/teacher.png'
// socket.io的客户端
import io from 'socket.io-client'
export default {
name: 'student',
data () {
return {
word: '',
message: [], // 聊天信息
littleQ, // 机器人
self, // 自己
socket: undefined // socket对象
}
},
created () {
// 1.开始连接
this.socket = io('http://118.24.62.36:8888')
// 2.链接成功回调
this.socket.on('connect', () => {
console.log('建立连接成功了')
})
// 3.接收服务器返回数据
this.socket.on('message', msg => {
console.log('接收到消息了')
console.log('msg:', msg)
this.message.push({
...msg,
// 是机器人
isStu: true
})
})
},
methods: {
//4.发送消息
send () {
console.log(this.word)
if (this.word !== '') {
this.socket.emit('message', {
// 消息
msg: this.word,
// 时间戳
timestamp: Date.now()
})
// 本地数组也要更新
this.message.push({
msg: this.word,
// 时间戳
timestamp: Date.now(),
// 不是机器人
isStu: false
})
this.word = ''
}
}
}
}
</script>
<style lang="less">
.student-container {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
background: #fafafa;
padding: 46px 0 50px 0;
.van-nav-bar {
background-color: #3296fa;
.van-nav-bar__title {
color: white;
}
.van-icon {
color: white;
}
}
.chat-list {
height: 100%;
overflow-y: scroll;
.chat-item {
padding: 10px;
.van-image {
vertical-align: top;
width: 40px;
height: 40px;
}
.chat-pao {
vertical-align: top;
display: inline-block;
min-width: 40px;
max-width: 70%;
min-height: 40px;
line-height: 38px;
border: 0.5px solid #c2d9ea;
border-radius: 4px;
position: relative;
padding: 0 10px;
background-color: #e0effb;
word-break: break-all;
font-size: 14px;
color: #333;
&::before {
content: '';
width: 10px;
height: 10px;
position: absolute;
top: 12px;
border-top: 0.5px solid #c2d9ea;
border-right: 0.5px solid #c2d9ea;
background: #e0effb;
}
}
.chat-pao.my {
background-color: #9eea6a;
&::before {
content: '';
background: #9eea6a;
}
}
}
}
.chat-item.right {
text-align: right;
.chat-pao {
margin-left: 0;
margin-right: 15px;
&::before {
right: -6px;
transform: rotate(45deg);
}
}
}
.chat-item.left {
text-align: left;
.chat-pao {
margin-left: 15px;
margin-right: 0;
&::before {
left: -5px;
transform: rotate(-135deg);
}
}
}
.reply-container {
position: fixed;
left: 0;
bottom: 0;
height: 44px;
width: 100%;
background: #f5f5f5;
z-index: 9999;
}
}
</style>
