简易版websocket封装及本地启动socket服务_如何在本地启动socket服务器

使用node启动本地socket服务

• 创建项目目录

mkdir server
1

• 初始化 npm

npm init -y
1

• 安装依赖库

npm i nodejs-websocket -S
1

• 创建服务文件

const ws = require('nodejs-websocket');
const server = ws.createServer(connect => {
	connect.on("text", data => {
		console.log("received: "+data);
		connect.sendText(data);
	});
	connect.on("close", (code, reason) => {
		console.log("connection closed!");
	});
	connect.on('error', ()=>{
		console.log("connection error!");
	});
});
server.listen('13000', ()=>{
	console.log("websocket server start success!");
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 启动服务

node server.js
1

• websocket 连接测试

封装简易版 websocket

let webSocket = null;
let isConnect = false; // 连接状态
let globalCallbacks = null;// 定义外部接收数据的回调函数
let reConnectNum = 0; // 重连次数

let websocketUrl = 'ws://127.0.0.1:5000';

// 心跳设置
let heartCheck = {
    heartbeatData: {
        DevID: {
            value: 1
        },
        DevHeart: {
            value: '1'
        }
    },// 心跳包
    timeout: 60 * 1000, // 每段时间发送一次心跳包 这里设置为60s
    heartbeat: null, // 延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）
    start: function () {
        this.heartbeat = setInterval(() => {
            if (isConnect) {
                webSocketSend(this.heartbeatData);
            } else {
                this.clear();
            }
        }, this.timeout);
    },
    reset: function () {
        clearInterval(this.heartbeat);
        this.start();
    },
    clear: function() {
        clearInterval(this.heartbeat);
    }
};

// 初始化websocket
function initWebSocket(callbacks) {
    // 此callback为在其他地方调用时定义的接收socket数据的函数
    if (callbacks) {
        if (typeof callbacks === 'object') {
            globalCallbacks = callbacks;
        } else {
            throw new Error('callbacks is not a object');
        }
    }
    if ('WebSocket' in window) {
        webSocket = new WebSocket(websocketUrl);// 创建socket对象
    } else {
        console.log('该浏览器不支持websocket!');
        return;
    }
    // 打开
    webSocket.onopen = function() {
        webSocketOpen();
    };
    // 接收
    webSocket.onmessage = function(e) {
        webSocketOnMessage(e);
    };
    // 关闭
    webSocket.onclose = function(e) {
        webSocketOnClose(e);
    };
    // 连接发生错误的回调方法
    webSocket.onerror = function(e) {
        webSocketOnError(e);
    };
}

// 连接socket建立时触发
function webSocketOpen() {
    console.log('WebSocket连接成功');
    // 首次握手
    // webSocketSend(heartCheck.heartbeatData);
    isConnect = true;
    globalCallbacks.openCallback && globalCallbacks.openCallback();
    // heartCheck.start();
    reConnectNum = 0;
}

// 客户端接收服务端数据时触发,e为接受的数据对象
function webSocketOnMessage(e) {
    console.log('websocket信息:');
    console.log(e.data);
    const data = JSON.parse(e.data); // 根据自己的需要对接收到的数据进行格式化
    globalCallbacks.getSocketResult(data); // 将data传给在外定义的接收数据的函数
}

// socket关闭时触发
function webSocketOnClose(e) {
    // heartCheck.clear();
    isConnect = false; // 断开后修改标识
    globalCallbacks.closeCallback && globalCallbacks.closeCallback();
    console.log(e);
    console.log('webSocket已经关闭 (code：' + e.code + ')');
    // 被动断开，重新连接
    if (e.code === 1006) {
        if (reConnectNum < 3) {
            initWebSocket();
            ++reConnectNum;
        } else {
            console.log('websocket连接不上，请刷新页面或联系开发人员!');
        }
    }
}

// 连接发生错误的回调方法
function webSocketOnError(e) {
    // heartCheck.clear();
    isConnect = false; // 断开后修改标识
    console.log('WebSocket连接发生错误:');
    console.log(e);
}

// 发送数据
function webSocketSend(data) {
    webSocket.send(JSON.stringify(data));// 在这里根据自己的需要转换数据格式
}

// 在其他需要socket地方主动关闭socket
function closeWebSocket(e) {
    webSocket.close();
    // heartCheck.clear();
    isConnect = false;
    reConnectNum = 0;
}
// 在其他需要socket地方接受数据
function getSock(callback) {
    globalCallbacks.getSocketResult = callback;
}

// 在其他需要socket地方调用的函数，用来发送数据及接受数据
function sendSock(agentData) {
    // 下面的判断主要是考虑到socket连接可能中断或者其他的因素，可以重新发送此条消息。
    switch (webSocket.readyState) {
        // CONNECTING：值为0，表示正在连接。
        case webSocket.CONNECTING:
            setTimeout(function() {
                sendSock(agentData);
            }, 1000);
            break;
        // OPEN：值为1，表示连接成功，可以通信了。
        case webSocket.OPEN:
            webSocketSend(agentData);
            break;
        // CLOSING：值为2，表示连接正在关闭。
        case webSocket.CLOSING:
            setTimeout(function() {
                sendSock(agentData);
            }, 1000);
            break;
        // CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
        case webSocket.CLOSED:
            // do something
            break;
        default:
            // this never happens
            break;
    }
}

export default {
    initWebSocket,
    closeWebSocket,
    sendSock,
    getSock
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

在 Vue 中使用

• 入口函数挂载

// main.js
import socketApi from '@/utils/socket';
Vue.prototype.$socketApi = socketApi;
1
2
3

• 组件中使用

createWebSocket() {
	const callbacks = {
		getSocketResult: this.getSocketResult,
		openCallback: this.openCallback,
		closeCallback: this.closeCallback
	};
	this.$socketApi.initWebSocket(callbacks);
},

// 创建连接
created() {
	this.createWebSocket()
}

// 关闭连接
beforeDestroy() {
	this.$socketApi.closeWebSocket();
}

// 发送消息
this.$socketApi.sendSock();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21