websocket连接通信

webSocket连接通信的简单介绍:

握手阶段:在建立WebSocket连接之前,客户端需要发送一个HTTP请求到服务器,请求升级为WebSocket协议。这个过程称为握手(Handshake)。如果服务器支持WebSocket协议,它将返回带有特定标头的HTTP响应,表示握手成功。
建立连接:客户端收到服务器的握手响应后,会重新建立连接。此时,连接将从HTTP协议切换到WebSocket协议,并保持打开状态。这样就建立了可持续的双向通信通道。
数据传输:一旦WebSocket连接建立,客户端和服务器可以开始互相发送消息。客户端和服务器都可以通过发送文本或二进制数据来通信。消息可以是简单的字符串,也可以是复杂的数据结构,如JSON对象等。
关闭连接:当需要关闭WebSocket连接时,客户端或服务器可以主动发送一个关闭帧来断开连接。收到关闭帧的一方会结束连接并发送回应帧,完成连接的关闭。

1.安装Websocket

2.引用

3.使用

欢迎补充,一起进步。

以下是在Vue2中使用WebSocket连接通信的完整代码示例: ```html <template> <div> <h1>WebSocket示例</h1> <div> <p>连接状态:{{ connectionStatus }}</p> <p>收到的消息:</p> <ul> <li v-for="(message, index) in receivedMessages" :key="index">{{ message }}</li> </ul> </div> <div> <p>发送消息:</p> <input type="text" v-model="inputMessage" /> <button @click="sendMessage">发送</button> </div> </div> </template> <script> import WebSocket from 'websocket' export default { data() { return { socket: null, connectionStatus: '未连接', receivedMessages: [], inputMessage: '', } }, mounted() { this.connectWebSocket() }, methods: { connectWebSocket() { // 建立WebSocket连接 this.socket = new WebSocket('ws://localhost:8080') // 根据实际情况修改服务器地址和端口号 // 监听WebSocket连接打开事件 this.socket.onopen = () => { console.log('WebSocket连接已打开') this.connectionStatus = '已连接' } // 监听WebSocket消息事件 this.socket.onmessage = (event) => { console.log(`收到消息:${event.data}`) this.receivedMessages.push(event.data) } // 监听WebSocket连接关闭事件 this.socket.onclose = () => { console.log('WebSocket连接已关闭') this.connectionStatus = '未连接' } }, sendMessage() { const message = this.inputMessage.trim() if (message) { this.socket.send(message) // 发送消息 console.log(`已发送消息:${message}`) this.inputMessage = '' } }, }, } </script> <style> ul { padding-left: 0; list-style: none; } </style> ``` 在这个示例中,我们在Vue组件的`mounted`方法中建立WebSocket连接,并且在Vue组件的`methods`中定义了一个发送WebSocket消息的方法。在模板中,我们可以看到一个输入框和一个发送按钮,用于发送WebSocket消息。同时,我们还添加了一些状态变量,用于显示WebSocket连接状态和收到的消息。 需要注意的是,在实际使用中,需要根据实际情况修改WebSocket服务器地址和端口号。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值