目录
概念
WebSocket是一种网络通信协议，它建立在TCP连接之上，提供全双工（双向）通信通道。与传统的HTTP请求不同，WebSocket允许服务器主动向客户端推送数据，而无需客户端重复发起请求。这使得它非常适合实时应用，如在线聊天、股票行情更新或游戏同步。关键优势包括低延迟、高效的数据传输和持久连接。WebSocket协议在RFC 6455中标准化，使用ws://（非加密）或wss://（加密）URL格式。
具体步骤
使用WebSocket涉及客户端和服务器端的实现。以下是基本步骤（以客户端为例，使用JavaScript）：
- 创建WebSocket连接：在客户端初始化一个WebSocket对象，指定服务器URL。
- 处理连接事件：定义事件监听器来处理连接状态变化：
onopen：当连接成功建立时触发。onmessage：当接收到服务器消息时触发。onerror：当连接发生错误时触发。onclose：当连接关闭时触发。
- 发送数据：使用
send()方法向服务器发送消息。 - 关闭连接：使用
close()方法主动关闭连接。
服务器端实现需要支持WebSocket协议，例如使用Node.js的ws库或Python的websockets库。整个过程确保高效的双向通信。
配置参数
在创建WebSocket对象时，可以指定以下常见配置参数（以JavaScript为例）：
- URL：必需参数，指定服务器地址，如
ws://baidu.com/socket。 - protocols：可选，指定子协议数组，用于协商通信规则，如
["chat", "game"]。 - binaryType：可选，设置接收二进制数据的类型，如
"blob"或"arraybuffer"。 - extensions：可选，用于协商扩展功能，如压缩。
- reconnectInterval：非标准参数，但常用于实现自动重连逻辑（需自定义实现），单位毫秒（ms）。
- timeout：非标准，但可设置连接超时（需通过事件处理模拟）。
这些参数在初始化时传入，例如：new WebSocket(url, protocols)。实际使用中，参数可能因语言或库而异，但核心URL和协议是通用的。
使用示例
以下是一个简单的使用了websocket的小功能。大家可以参考一下。
<template>
<div class="chat-box">
<header>聊天室 (在线:{{ count }}人)</header>
<div ref="msg-box" class="msg-box">
<div
v-for="(i, index) in list"
:key="index"
class="msg"
:style="i.userId === userId ? 'flex-direction:row-reverse' : ''"
>
<div class="user-head">
<img :src="i.avatar" height="30" width="30" :title="i.username" />
</div>
<div class="user-msg">
<span :style="i.userId === userId ? ' float: right;' : ''" :class="i.userId === userId ? 'right' : 'left'">{{
i.content
}}</span>
</div>
</div>
</div>
<div class="input-box">
<input ref="sendMsg" v-model="contentText" type="text" @keyup.enter="sendText()" />
<div class="btn" :class="{ ['btn-active']: contentText }" @click="sendText()">发送</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ws: null,
count: 0,
userId: this.$store.getters.id, // 当前用户ID
username: this.$store.getters.name, // 当前用户昵称
avatar: this.$store.getters.avatar, // 当前用户头像
list: [], // 聊天记录的数组
contentText: '', // input输入的值
}
},
mounted() {
this.initWebSocket()
},
destroyed() {
// 离开页面时关闭websocket连接
this.ws.onclose(undefined)
},
methods: {
// 发送聊天信息
sendText() {
const _this = this
_this.$refs.sendMsg.focus()
if (!_this.contentText) {
return
}
const params = {
userId: _this.userId,
username: _this.username,
avatar: _this.avatar,
msg: _this.contentText,
count: _this.count,
}
_this.ws.send(JSON.stringify(params)) // 调用WebSocket send()发送信息的方法
_this.contentText = ''
setTimeout(() => {
_this.scrollBottm()
}, 500)
},
// 进入页面创建websocket连接
initWebSocket() {
const _this = this
// 判断页面有没有存在websocket连接
if (window.WebSocket) {
const serverHot = window.location.hostname
const sip = '房间号'
// 填写本地IP地址 此处的 :9101端口号 要与后端配置的一致！
const url = 'ws://' + serverHot + ':9101' + '/groupChat/' + sip + '/' + this.userId // `ws://127.0.0.1/9101/groupChat/10086/聊天室`
const ws = new WebSocket(url)
_this.ws = ws
ws.onopen = function (e) {}
ws.onclose = function (e) {}
ws.onerror = function () {}
ws.onmessage = function (e) {
// 接收服务器返回的数据
const resData = JSON.parse(e.data)
_this.count = resData.count
_this.list = [
..._this.list,
{ userId: resData.userId, username: resData.username, avatar: resData.avatar, content: resData.msg },
]
}
}
},
// 滚动条到底部
scrollBottm() {
const el = this.$refs['msg-box']
el.scrollTop = el.scrollHeight
},
},
}
</script>
<style scoped>
...
</style>总结
WebSocket是一种强大的实时通信协议，解决了HTTP轮询的效率问题，提供低延迟、双向数据流。它广泛应用于实时场景，如聊天应用、在线协作和实时监控。优势包括：简化服务器推送、减少带宽消耗和提升用户体验。但使用时需注意安全性（优先使用wss://）和兼容性（现代浏览器均支持）。结合适当配置和事件处理，WebSocket能高效构建高性能网络应用。