从零开始搭建聊天系统之客户端连接websocket服务

没有看搭建websocket的请移步从零搭建聊天系统之Lumen+GatewayWorker
下面请看代码

执行laravel的artisan命令

shumingjiandeMacBook-Pro-2:im shumingjian$ php artisan work:socket start

如果你都参照我之前的文章结合了WorkerMan的话,现在应该是这样的:

shumingjiandeMacBook-Pro-2:im shumingjian$ php artisan work:socket start
-------------------------------------------- WORKERMAN ---------------------------------------------
Workerman version:3.0.12          PHP version:7.2.4
--------------------------------------------- WORKERS ----------------------------------------------
proto   user            worker            listen                      processes    status           
tcp     shumingjian     Gateway           websocket://0.0.0.0:8082    1             [OK]            
tcp     shumingjian     Register          text://0.0.0.0:1238         1             [OK]            
tcp     shumingjian     BusinessWorker    none                        3             [OK]            
----------------------------------------------------------------------------------------------------
Press Ctrl+C to stop. Start success.
Workerman[worker:socket] start in DEBUG mode

我们开启了一个ws服务；
现在我们需要让客户端开始连接

页面必须引入socket.io.js与json2.js

<script src='https://cdn.bootcss.com/socket.io/2.0.3/socket.io.js'></script>
<script src="/json/json2.js"></script>

ws =  new WebSocket('ws://'+location.hostname+':8082');

现在我们打开这个页面同时打开谷歌浏览器的控制台在NetWork中选中ws,理应可以看到code 等于101
在HTTP状态码中我们可以看到 101是指服务器已经理解了客户端的请求，并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求。在发送完这个响应最后的空行后，服务器将会切换到在Upgrade 消息头中定义的那些协议。或者切换到一个实时且同步的协议以传送利用此类特性的资源。

WechatIMG372.jpeg

至此，我们完成了客户端到服务端的基于TCP长连接的WS服务