websocket的应用
目录
概念
具体步骤
配置参数
使用示例
总结
概念
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"><divv-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, // 当前用户IDusername: 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.hostnameconst 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 = wsws.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能高效构建高性能网络应用。