WebSocket学习笔记
1:WebSocket的客户端(浏览器)实现
1.1:WebSocket对象
实现WebSocket的Web浏览器通过WebSocket对象公开所有必须的客户端功能(主要支持HTML5的浏览器)。一下API用于创建WebSocket对象:
var ws = new WebSocket(url)
参数url格式说明:ws:// ip地址 : 端口号 / 资源名称
1.2:WebSocket事件
WebSocket对象的相关事件
事件 | 事件处理程序 | 描述 |
---|---|---|
open | websocket对象.onopen | 连接建立时触发 |
message | websocket对象.onmessage | 客户端接收服务端数据时触发 |
error | websocket对象.onerror | 通信发生错误时触发 |
close | websocket对象.onclose | 连接关闭时触发 |
1.3:WebSocket方法
WebSocket对象的相关方法
方法 | 描述 |
---|---|
send() | 试用连接发送数据 |
2:WebSocket的服务端Python实现
接收到数据发送一个I got your message: (接收到的数据)
然后开始不停发送时间数据
import asyncio
import websockets
import time
async def echo(websocket, path):
async for message in websocket:
message = "I got your message: {}".format(message)
await websocket.send(message)
while True:
t = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())
await websocket.send(t)
asyncio.get_event_loop().run_until_complete(websockets.serve(echo, 'localhost', 50500))
asyncio.get_event_loop().run_forever()
3:WebSoket的客户端Vue实现
<template>
<div>
<button @click="send">发送消息</button>
<input v-model="receivedMessage"/>
</div>
</template>
<script>
export default {
data () {
return {
path:"ws://localhost:50500",
socket:"",
Send_txt:"ok",
receivedMessage:""
}
},
mounted () {
// 初始化
this.WebSocket_init()
console.log("sasasa")
this.send
},
methods: {
WebSocket_init() {
if(typeof(WebSocket) === "undefined"){
alert("您的浏览器不支持WebSocket!")
}else{
// 建立连接
this.socket = new WebSocket(this.path)
// 连接成功是调用open函数
this.socket.onopen = this.open
// 出错时调用errer函数
this.socket.onerror = this.error
// 接收到消息时调用getMessage函数
this.socket.onmessage = this.getMessage
}
},
open() {
console.log("WebSocket连接成功")
},
error() {
console.log("WebSocket错误")
},
// 接收到服务端数据
getMessage(msg) {
console.log(msg)
// 转String数据为Json
var testJson = eval("(" + msg.data + ")");
this.receivedMessage = testJson.tag
console.log(testJson.data[0].id)
},
send() {
this.socket.send(this.Send_txt)
},
close() {
console.log("WebSocket已关闭")
}
},
destroyed () {
this.socket.onclose = this.close
}
}
</script>
<style>
</style>