如何利用webSocket与Swoole打造一个小型聊天室

这篇文章给大家分享的是有关如何利用webSocket与Swoole打造一个小型聊天室的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

本来就是作为一个很小的案例来写的，包含的功能点也不是那多，索性就按照最最最低配置来搞。

• 能够显示聊天消息的聊天区，同时兼顾显示链接状态，当前是否连接成功，或者服务端是否断开连接，而前端不知道的状况。

• 一个输入框，纯粹的输入框 ?

• 点击按钮发送不刷新页面，同时清空当前输入框内容，就简单的一个 button 而已，点击执行，不支持回车发送。

• 收到消息，滚动条自动触底，这个功能在某些使用场景是方便的，但又会造成某些场景使用不方便，方便在于有新消息不需要人工滚动，不方便在于，可能你在看历史消息，它自动触底了…还需要根据自己实际需求优化一下下。

• 随机昵称，当然不需要保存，刷新即丢，在收到消息如果是自己发送的，则显示 [ 我 ] 在某某时候发送了某某消息，而不是显示昵称字符串。

项目环境

直接粘贴复制的

composer create-project topthink/think tpcd tpcomposer require topthink/think-swoole

因为是测试项目，所有的都是默认安装，在安装完之后，访问前端页面，使用 view 方法会报错，百度一下就有解决方案了。

webSocket 的使用

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

1. onopen() 发起连接，连接成功后执行。

2. onclose() 连接断开后执行。

3. onmessage() 收到服务端消息后执行。

4. onerror() 服务器异常执行。
   其实，webSocket 就这些常用方法，也没啥特殊要求的，他就是作为一个保持连接，接收服务器状态的一个浏览器的 API 存在，非常简洁方便。

前端页面代码：

                                       
聊天区域