webscoket 简单的聊天室：
-
webscoket 的服务器workerman:
（1）下载地址：
http://www.workerman.net/windows
打开后下载：php-5.6.36-Win32-VC11-x64（2）在文件中找到：
Workerman-master 下的 start.php 用 php 打开 ==》启动服务器成功（3）在要启动的文件打开 git
输入命令：start start.php（4）打开 index 文件，完成
-
WebScoket 介绍:
（1）是网络通信协议，依赖与服务器（node,workerman......）
（2）服务器可以主动向服务器推送消息
EG：一个简单的聊天室制作：
| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <title>Title</title> |
| | <style> |
| | *{ |
| | margin: 0; |
| | padding: 0; |
| | } |
| | body,html{ |
| | width: 100%; |
| | height: 100%; |
| | } |
| | .fixed{ |
| | position: fixed; |
| | top: 0; |
| | width: 100%; |
| | height: 100%; |
| | background: lightcyan; |
| | } |
| | .box{ |
| | margin:0 auto; |
| | width:80%; |
| | height: 500px; |
| | text-align: center; |
| | } |
| | .box h1{ |
| | font-size: 35px; |
| | color: lightcoral; |
| | padding-top: 50px; |
| | } |
| | .box button,.box input{ |
| | border:0; |
| | outline: none; |
| | border-radius:10px; |
| | margin-top: 30px; |
| | } |
| | .box input{ |
| | height:31px; |
| | width:200px; |
| | background: lightgreen; |
| | padding-left: 20px; |
| | } |
| | .box button{ |
| | height:31px; |
| | width:80px; |
| | } |
| | .index{ |
| | width: 100%; |
| | height: 100%; |
| | background: lightgoldenrodyellow; |
| | } |
| | .div{ |
| | width:60%; |
| | height:400px; |
| | margin:20px auto 0; |
| | overflow: auto; |
| | background: #fff; |
| | } |
| | .sys{ |
| | margin: 20px auto; |
| | width:200px; |
| | height:20px; |
| | } |
| | .sys p{ |
| | background:lightgray; |
| | color: #ffffff; |
| | border-radius:4px; |
| | } |
| | .info_left{ |
| | width: 98%; |
| | height: 50px; |
| | text-align: left; |
| | padding-left:10px; |
| | } |
| | .info_right{ |
| | width:98%; |
| | height: 50px; |
| | text-align: right; |
| | padding-right:10px; |
| | } |
| | .name{ |
| | color: gray; |
| | font-size: 15px; |
| | } |
| | .text{ |
| | text-align: left; |
| | display: inline-block; |
| | min-width:50px; |
| | max-width:200px; |
| | min-height:30px; |
| | word-break: break-word; |
| | background:lightgray; |
| | color: #ffffff; |
| | border-radius:4px; |
| | margin:0 20px; |
| | } |
| | .text1{ |
| | background: lightgreen; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div class="fixed"> |
| | <div class="box"> |
| | <h1>登录页面</h1> |
| | <input type="text" id="txt" placeholder="请填写用户名"> |
| | <button id="btn">登录</button> |
| | </div> |
| | </div> |
| | <div class="index"> |
| | <div class="box"> |
| | <h1>聊天页面</h1> |
| | <div class="div"> |
| | </div> |
| | <input type="text" id="txt1" placeholder="请输入内容"> |
| | <button id="btn1">发送</button> |
| | </div> |
| | </div> |
| | <script src="jquery-3.2.1.min.js"></script> |
| | <script> |
| | let userinfo = { |
| | 'userName': '', |
| | 'content': '', |
| | 'isSys': 0 |
| | } |
| | $('#btn').on('click',function () { |
| | //获取登录用户名： |
| | userinfo.userName = $('#txt').val(); |
| | if (userinfo.userName == ''){ |
| | alert('用户名不能为空'); |
| | return false; //终止执行 |
| | } |
| | //登录页面隐藏，聊天界面显示： |
| | $('.fixed').hide(); |
| | $('.index').show(); |
| | |
| | //建立连接： |
| | let socket = new WebSocket('ws://127.0.0.1:2347') |
| | //成功连接：打开应用 ，发送一条用户信息 |
| | socket.onopen = function(){ |
| | userinfo.isSys = 1 |
| | socket.send(JSON.stringify(userinfo)) |
| | }; |
| | //处理接受到的消息： |
| | socket.onmessage = function(event){ |
| | // 消息内容在事件对象event下 |
| | let data = JSON.parse(event.data); |
| | if(data.isSys) { |
| | $('.div').append(<div class="sys"><p>系统消息：${data.userName}上线了</p></div>) |
| | }else{ |
| | //提升用户体验(网络延迟) |
| | if (userinfo.userName !== data.userName) { |
| | $('.div').append(| | | <div class="info_left"> | | | <div class="name">${data.userName}:</div> | | | <div class="text">${data.content}</div> | | | </div>); |
| | } |
| | } |
| | } |
| | //发送聊天内容： |
| | $('#btn1').on('click',function(){ |
| | userinfo.isSys = 0; |
| | userinfo.content = $('#txt1').val() |
| | $('.div').append(| | | <div class="info_right"> | | | <div class="name1">${userinfo.userName}:</div> | | | <div class="text text1">${userinfo.content}</div> | | | </div>) |
| | $('#btn1').val('') //发送完成后清空文本框 |
| | socket.send(JSON.stringify(userinfo)) |
| | }) |
| | }) |
| | </script> |
| | </body> |
| | </html> |
