Swoole和Websocket实现简易聊天室

  • Swoole和Websocket实现简易聊天室已关闭评论
  • 125 views
  • A+
所属分类:JavaScript
在这个全民直播的时代,在线视频直播已经成为我们饭后必看的内容了。视频直播中有个弹幕功能,相信大家也玩过其实这个类似一个聊天室。今天要讲的内容就是使用SwooleWebsocket怎么实现一个简易聊天室,下面图片就是最终实现出来的效果。
Swoole和Websocket实现简易聊天室

什么是Websocket

WebSocket是一种计算机通信协议,通过单个TCP连接提供全双工通信信道。 WebSocket协议在2011年被IETF标准化为RFC6455,WebSocket旨在在Web浏览器和Web服务器中实现,但可由任何客户端或服务器应用程序使用。 WebSocket协议是独立的基于TCP的协议。它与HTTP的唯一关系是它的握手被HTTP服务器解释为升级请求。WebSocket协议允许浏览器和Web服务器之间的交互具有较低的开销,从而实现从服务器的实时数据传输。大多数主要浏览器(包括Google Chrome,Microsoft Edge,Internet Explorer,Firefox,Safari和Opera)都支持WebSocket协议,大部分程序语言都可实现Websocket服务PHP的Swoole就是其中一个。

环境准备

  1. Chrome
  2. PHP 7.1.* swoole2.0.*
  3. Nginx
  4. Node.js Npm Webpack2
上面Nginx可选,我用的环境是VagrantPHP(v7.1.4)Chrome(v60)(Node.js(v6.10)Webpack2

开始工作

使用Swoole绑定事件实现消息接收和广播消息。广播消息使所有连上服务的socket都能收到其它socket的消息,从而达到主动推送到客户端。

绑定事件

接收推送消息

注意: 定义private $message 是因为数据帧不完整,一个WebSocket请求可能会分成多个数据帧进行发送,所有我们必须使用$frame->finish来检测数据帧的完整性。在不完整的情况我们使用类属性$message来保存帧数据。
通过以上两个类我们完成了推送接收消息,接下来我们要完成Html页面的内容制作和Websocket(JavaScript)的脚本编写。Html页面我们使用Bootstrap构建的模板

静态页面

  1. 创建一个html5标准的index.html, chat.js, app.css三个文件。
  2. 打开 https://bootsnipp.com/snippets/WaEvr地址。
  3. 将上地址的HTML、CSS、JS页签的内容拷贝到index.html, app.css, chat.js对应的文件
  4. 添加依赖到index.html
上面这个开源的模板是没有聊天室昵称功能,我们要为它加上昵称功能。
  • 修改HTML将以下内容添加到body之内
  • 修改CSS将以下内容添加到app.css
Swoole和Websocket实现简易聊天室
  • 编写websocket代码
  • chat.js最终的完整代码
  • 配置webpack
  • 执行webpack生成文件
整个前端流程到此结束

最终工作

  • 创建websocket服务
  • 启动服务
  • 绑定域名,查看效果
Swoole和Websocket实现简易聊天室

项目地址

https://github.com/TianLiangZhou/loocode-example

推荐阅读

  1. https://www.w3.org/TR/2009/WD-websockets-20091222/
  2. https://developer.mozilla.org/en/docs/Web/API/WebSocket
  3. https://tools.ietf.org/html/rfc6455
  4. https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin