微信小程序 swoole简单聊天室

小_xu

已于 2022-01-19 16:42:42 修改

阅读量277

点赞数

分类专栏：微信小程序 swoole tcp 文章标签：微信小程序 swoole tcp/ip

于 2021-12-28 17:09:44 首次发布

本文链接：https://blog.csdn.net/xiao_xu_aaa/article/details/122192502

版权

微信小程序同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

swoole

1 篇文章 0 订阅

订阅专栏

tcp

1 篇文章 0 订阅

订阅专栏

第一步在linux创建php即时通讯文件

<?php
//服务器代码
//创建websocket 服务器
$ws = new swoole_websocket_server("0.0.0.0",9501);
// open
$ws->on('open',function($ws,$request){
    echo "新用户 $request->fd 加入。\n";
    $GLOBALS['fd'][$request->fd]['id'] = $request->fd;//设置用户id
    $GLOBALS['fd'][$request->fd]['name'] = '匿名用户';//设置用户名

});
//message
$ws->on('message',function($ws,$request){
    $msg = $GLOBALS['fd'][$request->fd]['name'].":".$request->data."\n";
    if(strstr($request->data,"#name#")){//用户设置昵称
        $GLOBALS['fd'][$request->fd]['name'] = str_replace("#name#",'',$request->data);

    }else{//进行用户信息发送
        //发送每一个客户端
        foreach($GLOBALS['fd'] as $i){
            $ws->push($i['id'],$msg);
        }
    }
    echo('连接成功');
});
//close
$ws->on('close',function($ws,$request){
    echo "客户端-{$request} 断开连接\n";
    unset($GLOBALS['fd'][$request]);//清楚连接仓库
});


$ws->on('receive', function (\Swoole\Server $server, $fd, $reactor_id, $data)
{
if ($data == 'ping')
{
checkDB();
checkServiceA();
checkRedis();
$server->send('pong');
}
});


 

$server->set([
'worker_num' => 1,
'open_tcp_keepalive' => 1, // 开启tcp_keepalive
'tcp_keepidle' => 4, // 4s没有数据传输就进行检测
'tcp_keepinterval' => 1, // 1s探测一次
'tcp_keepcount' => 5, // 探测的次数，超过5次后还没有回包close此连接
]);

$ws->start();

第二步运行php文件（若是运行报错检查端口是否被占用占用）

netstat -tunlp

若是占用杀死端口进程 kill 断开id

微信小程序视图层代码


<view>
  <view class="sendmessage">
    <input id="message" bindblur="inputMessage" placeholder="请输入聊天内容"></input>
    <button bindtap="sendMessage">发送</button>
  </view>
</view>
 
<view>
  <scroll-view scroll-y="true" class="history">
  <rich-text nodes="{{messages}}"></rich-text>
  <view style="width: 95%; height: 35px; font-size: 25px; text-align: center; line-height: 25px; margin-left: 2.5%;">{{list}}</view>
  </scroll-view>
</view>

微信小程序 js端代码

let socketOpen = false
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    content:"",
    messages:""
  },
  messages(msg) {
    if (socketOpen) {

      wx.sendSocketMessage({
        data:msg
      })
    }
  },
  inputMessage(e){
    this.setData({
      content:e.detail.value
    })
  },
  sendMessage:function(){
    this.messages(this.data.content)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this
    wx.connectSocket({
      url: 'ws://0.0.0.0:9501'
    })
    wx.onSocketOpen(function(res) {
      socketOpen = true
    })
    wx.onSocketMessage(function (res) {
      console.log(res)
  
      that.setData({
        messages:that.data.messages.concat('<br>'+res.data)
      })
    })
    wx.onSocketClose((res) => {
      console.log(res)
      if(res.code==1006)
      {
       that.setData({
         list:'自动断开连接，请刷新后在试'
       })
      }
    })
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  }
})

可在写一个http客户端方便测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script></script>
</head>
<body>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title id="myTitle">IM</title>
</head>
<style>
    body {
        background-color: palegreen;
    }
    #myname {
        width:120px;
        height:30px;
        border-radius: 20px;
    }
    .setUserName {
        width:80px;
        height:30px;
        background-color: cornflowerblue;
        font-weight: bold;
    }
    #msg{
        margin:80px 300px;
        width:450px;
        height:200px;
        background-color:white;
    }
    .show_send{
        margin:0px 300px;
    }
    #text{
        width:300px;
        height:30px;
    }
    .send_button{
        width:80px;
        height:30px;
        background-color: #4288ce;
        border-radius: 20px;
        color: white;
        font-weight: bold;
    }
</style>
<body>
<h1 align="center" style="color: white">swoole-websocket 及时通讯demo</h1>
<!--发送信息-->
<div id="send_msg" class="main box-shadow" style="display:none;">
    <div id="msg"></div>
    <div class="show_send">
        <input type="text" id="text" placeholder="请输入内容"><input class="send_button" value="发送" type="submit" onclick="send_message()">
    </div>
</div>
<!--设置昵称-->
<div id="setName" class="box-shadow" style="display:block;margin:200px 150px 200px 550px;">
    <lable>请输入你的昵称！</lable>
    <br>
    <input type="text" id="myname"/>
    <input type="submit" class="setUserName" value="设置昵称" onclick="send_name()">
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    var msg = document.getElementById("msg");
    var wsServer = 'ws://0.0.0.0:9501';
    var websocket = new WebSocket(wsServer);
    websocket.onopen = function(evt){
        // msg.innerHTML = websocket.readyState;
        /*
         connecting 0
         open 1
         closing 2
         closed 3

        */
    }
    websocket.onmessage = function(evt){
        msg.innerHTML += evt.data+'<br />';
        console.log('从服务器获取到的数据:'+ evt.data);
    }
    
    websocket.onclose = function(evt){
        alert('自动断开');
    }
    websocket.onerror = function(evt,e){
        console.log('错误:'+evt.data);
    }
    function send_message(){
        var text = document.getElementById('text').value;
        document.getElementById('text').value = '';
        websocket.send(text);
    }
    function send_name(){
        var text = document.getElementById('myname').value;
        websocket.send("#name#"+text);
        var myTitle = document.getElementById("myTitle");
        myTitle.innerHTML = "IM" +text;
        alert("设置成功");
        var setName = document.getElementById("setName");
        setName.style.display = "none";
        var send_msg = document.getElementById("send_msg");
        send_msg.style.display = "block";
    }
</script>
</html>

</body>
</html>