1.1.0 • Published 4 years ago
boom-websocket-client v1.1.0
boom-websocket-client
搞了个pusher服务结果想着客户端也整一个算了。
安装
npm install boom-websocket-client --save
使用
(1)页面
import socket from "boom-websocket-client";
//建立socket连接
socket.initWebSocket(url);
//建立连接的时候如需传递参数给服务端
let uid = 1;
socket.initWebSocket(url, uid);
(2)全局
/** ---------------------引入websocket客户端 (main.js)-------------------**/
import socketApi from 'boom-websocket-client';
Vue.prototype.socketApi = socketApi;
/** ----------------建立socket连接--------------------------**/
this.socketApi.initWebSocket(url);
//建立连接的时候如需传递参数给服务端
let uid = 1;
this.socketApi.initWebSocket(url, uid);
/** --------------------发送消息到服务端--------------**/
this.socketApi.sendSock(data);
// 接收socket回调函数返回数据的方法
getConfigResult(res) {
console.log(res);
},
this.socketApi.sendSock(data, this.getConfigResult);
/** --------------------关闭--------------**/
this.socketApi.webSocketClose();
简单例子
<template>
<div>
<div>在此页面使用封装的socket</div>
<el-input class="tool-input" placeholder="请输入" v-model="msg"></el-input>
<el-button v-on:click="handleSendMsg">提交</el-button>
</div>
</template>
<script>
export default {
name: 'Index',
components: {},
data() {
return {
ws: false,
wsUrl: " ws://127.0.0.1:12222/",//定义socket连接地址
uid: 1,
wsType: "CONNECT",
msg: ''
}
},
created() {
//建立socket连接
this.socketApi.initWebSocket(this.wsUrl,this.uid);
//data为和后端商量好的数据格式
const data = {
type: this.wsType,
msg: "说的话",
};
this.websocketSend(data);
},
destroyed() {
this.socketApi.webSocketClose();
},
mounted() {
},
methods: {
initData() {
setTimeout(() => {
}, 500);
},
handleSendMsg(){
this.websocketSend(this.msg);
},
// 接收socket回调函数返回数据的方法
getConfigResult(res) {
console.log(res);//服务端返回的数据
},
websocketSend(data) {
//data为要发送的数据,this.getConfigResult为回调函数,用于在此页面接收socket返回的数据。
this.socketApi.sendSock(data, this.getConfigResult);
},
},
}
</script>
说明
- 该版本基本满足使用,后续将看情况更新