引言
前面的章節我們大致瞭解了一下開發客服的系統的思路和GatewayWorker，這一小節我們來看一下如何通過WebSocket連接到GatewayWorker。
WebSocket
WebSocket的監聽事件
| Socket.onopen | 連接建立時觸發 |
| Socket.onmessage | 客戶端接收服務端數據時觸發 |
| Socket.onerror | 通信發生錯誤時觸發 |
| Socket.onclose | 連接關閉時觸發 |
WebSocket的方法
| Socket.send() |
使用連接發送數據 |
| Socket.close() |
關閉連接 |
連接GatewayWorker
查看WebSocket的端口
知道了Gateway的端口，那現在我們就可以使用WebSocket來連接了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebSocket</title>
</head>
<body>
<script type="text/javascript">
// 初始化WebSocket
let socket = new WebSocket('ws://127.0.0.1:8282');
// 監聽連接事件
socket.onopen = function(res) {
// 自定義發送數據格式
let msg = {
type: 'init',
id: '',
name: ''
};
// 發送數據
socket.send(JSON.stringify(msg));
};
// 監聽消息
socket.onmessage = function(res) {
console.log(res);
};
// 監聽關閉事件
socket.onclose = function(res) {
console.log(res);
};
// 監聽失敗事件
socket.onerror = function(err) {
console.log(err);
}
</script>
</body>
</html>
處理業務邏輯
在客服系統中，訪客和客服即可以發送數據也可以接收數據，另外客服還可以將訪客轉接給其它客服或發起服務評分功能等，對於這些功能我們在WebSocket裏要如何處理呢。上文我們瞭解到WebSocket有一個監聽服務端數據時觸發的事件（onmessage），沒錯，我們就是在此處理服務端發來的數據。
假如我們服務端自定義的數據格式如下
{
type:'chat', // 業務類型（根據需求更改）
data:'hello' // 需要處理的數據
}
onmessage處理
// 監聽消息
socket.onmessage = function(res) {
// 將字符串解析成JSON格式
res = JSON.parse(res);
// 根據swith語句來處理不同的type事件
switch (res.type) {
case 'init':
// type爲init時需要處理的業務
break;
case 'chat':
// type爲chat時需要處理的業務
break;
// ......
}
};
發送數據
上文我們瞭解到WebSocket有一個發送數據的方法（send），假如我們new的WebSocket對象爲socket，則可以用socket.send()來發送數據，同樣，服務端也要能處理WebSocket發送的業務邏輯，所以可以在發送的data裏帶上上業務類型type。
如下所示：
{
type:'chat', // 業務類型（根據需求更改）
data:'hi' // 需要處理的數據
}
這樣我們就可以在GatewayWorker的Events.php裏的onMessage方法根據type來處理不同的業務邏輯。