语音聊天程序源码——简单的聊天室搭建

[复制链接]
查看: 2144|回复: 0
发表于 2019-10-7 17:23:49 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
安装好swoole后开始搭建
前端
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>聊天室</title>
  6. </head>
  7. <style>
  8.     #set_name{
  9.         margin: auto;
  10.         text-align: center;
  11.     }
  12. </style>
  13. <body>
  14. <h3 style="text-align: center">亮亮的聊天室</h3>
  15. <div id="set_name">
  16. 姓名:<input name="name" id="name"><input type="button" onclick="set_name();" value="进入群聊">
  17. </div>
  18. <div id="chat" style="width: 600px; border: red 1px solid;margin: auto;display: none">
  19.     <div id="sayContent" style="height: 300px;border-bottom: silver 1px dashed;">

  20.     </div>
  21.     <div style="height: 75px;margin-top: 10px">
  22.         <textarea id="content" style="height: 50px;width: 480px;background-color: #00a0e9;float: left;"></textarea>
  23.         <button id="submit" style="float: right;height: 55px;width:50px;margin-right:45px;display: block;" onclick="send_msg();">发送</button>
  24.     </div>
  25. </div>
  26. <script>
  27.     var name = ws = '' ;
  28.     //执行websock
  29.     function chat() {
  30.         var wsserver = 'ws://47.94.11.195:443';
  31.         //调用WebSocket对象建立连接
  32.         //ws  wss: // ip:port(字符串)
  33.         ws = new WebSocket(wsserver);
  34.         //获取聊天内容展示窗口
  35.         var sayContent = document.getElementById('sayContent');
  36.         //onopen监听连接打开
  37.         ws.onopen = function (v) {
  38.             var user = new Object();
  39.             user.name = name;
  40.             user.type = 1;//对用户设置姓名
  41.             var json = JSON.stringify(user);
  42.             ws.send(json);//发送数据
  43.         }
  44.         //onmessage监听服务器数据推送
  45.         ws.onmessage = function (v) {
  46.             var html = sayContent.innerHTML;
  47.             sayContent.innerHTML = html + "<br>"+v.data;
  48.         }
  49.         //监听连接关闭
  50.         ws.onclose = function (v) {
  51.             var html = sayContent.innerHTML;
  52.             sayContent.innerHTML = html + "<br>聊天室已关闭!";
  53.         }
  54.     }
  55.     //设置用户名
  56.     function set_name() {
  57.         name = document.getElementById('name').value;
  58.         if(name == ''){
  59.             alert('请输入用户名!');
  60.             return false;
  61.         }
  62.         document.getElementById('set_name').style.display='none';
  63.         document.getElementById('chat').style.display='block';
  64.         chat();
  65.     }
  66.     function send_msg() {
  67.         var content = document.getElementById('content');
  68.         if(content.value == ''){
  69.             alert('请输入聊天内容!');
  70.             return false;
  71.         }

  72.         var msg = new Object();
  73.         msg.content = content.value;
  74.         msg.type = 2;
  75.         var str = JSON.stringify(msg);
  76.         ws.send(str);
  77.     }
  78. </script>
  79. </body>
  80. </html>
复制代码
后台
  1. <?php
  2. $server = new swoole_websocket_server("0.0.0.0", 443);
  3. $server->users = [];
  4. $server->on('open', function (swoole_websocket_server $server, $request) {
  5.     $server->users[$request->fd]['id'] = $request->fd;
  6. });
  7. $server->on('message', function (swoole_websocket_server $server, $frame) {
  8.     $data = json_decode($frame->data,true);
  9.     if($data['type'] == 1){
  10.         $server->users[$frame->fd]['name']=$data['name'];
  11.         $server->push($frame->fd,'欢迎您('.$data['name'].')进入聊天室!');
  12.     }else{
  13.         foreach($server->users as $v){
  14.             $server->push($v['id'], $server->users[$frame->fd]['name'].'说:'.$data['content']);
  15.         }
  16.     }
  17. });
  18. $server->on('close', function ($ser, $fd) {
  19.     file_put_contents('qq.txt',$server->users[$frame->fd],FILE_APPEND);
  20.     unset($server->users[$frame->fd]);
  21. });
  22. $server->start();
复制代码
  1. <?php
  2. # 定义 clientFds 数组 保存所有 websocket 连接
  3. $clientFds = [];

  4. # 创建 websocket 服务
  5. $server = new swoole_websocket_server("0.0.0.0", 8080);
  6. # 握手成功 触发回调函数
  7. $server->on('open', function (swoole_websocket_server $server, $request) use (&$clientFds) {
  8.    # echo "server: handshake success with fd{$request->fd}\n";
  9.    # 将所有客户端连接标识,握手成功后保存到数组中
  10.    $clientFds[] = $request->fd;
  11. });
  12. # 收到消息 触发回调函数
  13. $server->on('message', function (swoole_websocket_server $server, $frame) use (&$clientFds) {
  14.    # echo "receive from {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}\n";
  15.    # $server->push($frame->fd, "this is server");
  16.    # 当有用户发送信息,发送广播通知所有用户
  17.    foreach ($clientFds as $fd) {
  18.       $server->push($fd, $frame->data);
  19.    }
  20. });
  21. # 关闭连接 触发回调函数
  22. $server->on('close', function ($ser, $fd) use (&$clientFds) {
  23.    # echo "client {$fd} closed\n";
  24.    # 关闭会话 销毁标识 fd
  25.    # 根据 value 去数组中找对应的 key
  26.    $res = array_search($fd, $clientFds, true);
  27.    unset($clientFds[$res]);
  28. });
  29. # 启动 websocket 服务
  30. $server->start();
复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title>WebSocket 聊天室</title>
  6. </head>
  7. <body>
  8. <div id="main" style="width:600px;height: 200px; overflow: auto;border: solid 2px black;">
  9. </div>
  10. <textarea id="textarea"></textarea>
  11. <br/>
  12. <input type="button" value="发送数据" onclick="send()">
  13. <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  14. <script type="text/javascript">
  15.     var name =prompt("请输入您的昵称","匿名者"); //弹出 input 框
  16.     // 打开一个 web socket
  17.     var ws = new WebSocket("ws://ip:8080");

  18.     ws.onopen = function() {
  19.         console.log("连接成功");
  20.     };

  21.     //收到消息 触发回调
  22.     ws.onmessage = function (evt) {
  23.         var data = evt.data;
  24.         console.log("收到 socket 服务消息,内容:" + data);
  25.         $('#main').append("<p>" + data + "</p>");
  26.     };

  27.     function send() {
  28.         var data = document.getElementById('textarea').value;
  29.         ws.send(name+ ":"+ data);
  30.     }

  31.     ws.onclose = function() {
  32.         // 关闭 websocket
  33.         console.log("连接已关闭...");
  34.     };
  35. </script>
  36. </body>
  37. </html>
复制代码


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

 
 
工作时间:
8:00-18:00
客服热线:
15368564009
客服微信