这个是在已经创建好的vue项目中进行一个加入了websocket
websocket语法
url是请求的地址
WebSocket(url[, protocols])
Socket.readyState
只读属性 readyState 表示连接状态,可以是以下值:
0 - 表示连接尚未建立。
1 - 表示连接已建立,可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount
只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。
事件 事件处理程序 描述
open Socket.onopen 连接建立时触发
message Socket.onmessage 客户端接收服务端数据时触发
error Socket.onerror 通信发生错误时触发
close Socket.onclose 连接关闭时触发
方法 描述
Socket.send()
使用连接发送数据
Socket.close()
关闭连接
script的部分
data() {
return {
value: "", //输入框的值
path: "ws://192.168.1.22:18308/test", //后端的接口
socket: "",
websocketMessage: {},//接收的message返回来的值
};
},
生命周期函数部分
created() {
//进入聊天组件实例化websocket
this.websocket_Init();
},
destroyed() {
//组件卸载时,关闭websocket
this.socket.close();
},
methods部分
methods: {
/**
* 实例化websocket
* @param {null}
* @returns {null}
*/
websocket_Init() {
// 实例化socket
this.socket = new WebSocket(this.path);
// 监听socket连接
this.socket.onopen = this.open;
// 监听socket错误信息
this.socket.onerror = this.error;
//监听scket消息
this.socket.onmessage = this.getMessage;
//关闭socket
this.socket.onclose = this.socketClose;
},
/**
* 关闭连接
* @param {null}
* @returns {null}
*/
socketClose(e) {
console.log("断开连接", e);
},
/**
* 连接socket
* @param {null}
* @returns {null}
*/
open() {
console.log("socket连接成功");
},
/**
* 连接报错
* @param {null}
* @returns {str}
*/
error(e) {
console.log("连接错误", e);
},
/**
* 接收消息
* @param {path}
* @returns {path}
*/
getMessage(msg) {
console.log(msg);
this.websocketMessage = msg;
},
/**
* 发送消息
* @param {str}
* @returns {str}
*/
sendvalue(value) {
console.log("send发送的" + value);
this.socket.send(value);
},
/**
* 点击回车事件
* @param {null}
* @return {void}
*/
handleEnterThing() {
this.sendvalue(JSON.stringify(this.value)); //将输入的value转化为字符串
}
},