简单版,客户端和服务端使用websocket进行连接通信

最新推荐文章于 2024-05-17 20:55:58 发布

刘默生

最新推荐文章于 2024-05-17 20:55:58 发布

阅读量1.1k

点赞数

分类专栏： im通信

本文链接：https://blog.csdn.net/weixin_43811134/article/details/113740049

版权

im通信专栏收录该内容

3 篇文章 0 订阅

订阅专栏

注意：如果发现连接不上websokect，大概率有两种情况，一种是防火墙没有关闭，一种是安全组未开放，其实就是端口未开放。

客户端：页面

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>WebSocket链接</title>
    <style media="screen">
    @charset "utf-8";
    body{
      font-family:verdana, Arial, Helvetica, "宋体", sans-serif;
      font-size: 12px;
    }
    body ,div ,dl ,dt ,dd ,ol ,li ,h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,pre ,form ,fieldset ,input ,P ,blockquote ,th ,td ,img,
    INS {
      margin: 0px;
      padding: 0px;
      border:0;
    }
    ol{
      list-style-type: none;
    }
    img,input{
      border:none;
    }

    a{
      color:#198DD0;
      text-decoration:none;
    }
    a:hover{
      color:#ba2636;
      text-decoration:underline;
    }
    a{blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
    :focus{outline:0;}

    /*讨论留言添加表情*/
    .add_face{
      background-repeat: no-repeat;
      height: 24px;
      width: 24px;
      background-color: transparent;}
    /*视频聊天区*/
    .talk{
      height: 480px;
      width: 400px;
      margin:0 auto;
      border-left-width: 1px;
      border-left-style: solid;
      border-left-color: #444;
    }
    .talk_title{
      width: 100%;
      height:40px;
      line-height:40px;
      text-indent: 12px;
      font-size: 16px;
      font-weight: bold;
      color: #afafaf;
      background:#212121;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #434343;
      font-family: "微软雅黑";
    }
    .talk_title span{float:left}
    .talk_title_c {
      width: 100%;
      height:30px;
      line-height:30px;
    }
    .talk_record{
      width: 100%;
      height:398px;
      overflow: hidden;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #434343;
      margin: 0px;
    }
    .talk_word {
      line-height: 40px;
      height: 40px;
      width: 100%;
      background:#212121;
      text-align: center;
    }
    .messages {
      height: 24px;
      width: 240px;
      text-indent:5px;
      overflow: hidden;
      font-size: 12px;
      line-height: 24px;
      color: #666;
      background-color: #ccc;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
    }
    .messages:hover{background-color: #fff;}
    .talk_send{
      width:50px;
      height:24px;
      line-height: 24px;
      font-size:12px;
      border:0px;
      margin-left: 2px;
      color: #fff;
      background-repeat: no-repeat;
      background-position: 0px 0px;
      background-color: dodgerblue;
      font-family: "微软雅黑";
    }
    .talk_send:hover {
      background-position: 0px -24px;
    }
    .talk_record ul{ padding-left:5px;}
    .talk_record li {
      line-height: 25px;
    }
    .talk_word .controlbtn a{
      margin: 12px;
    }
    .talk .talk_word .order {
      float:left;
      display: block;
      height: 14px;
      width: 16px;
      background-image: url(../images/loop.png);
      background-repeat: no-repeat;
      background-position: 0px 0px;
    }

    .talk .talk_word .loop {
      float:left;
      display: block;
      height: 14px;
      width: 16px;
      background-image: url(../images/loop.png);
      background-repeat: no-repeat;
      background-position: -30px 0px;
    }
    .talk .talk_word .single {
      float:left;
      display: block;
      height: 14px;
      width: 16px;
      background-image: url(../images/loop.png);
      background-repeat: no-repeat;
      background-position: -60px 0px;
    }
    .talk .talk_word .order:hover,.talk .talk_word .active{
      background-position: 0px -20px;
      text-decoration: none;
    }
    .talk .talk_word .loop:hover{
      background-position: -30px -20px;
      text-decoration: none;
    }
    .talk .talk_word .single:hover{
      background-position: -60px -20px;
      text-decoration: none;
    }

    /* * CSS Styles that are needed by jScrollPane for it to operate correctly. * * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane * may not operate correctly without them. */
    .jspContainer{overflow:hidden;position:relative;}
    .jspPane{position:absolute;}
    .jspVerticalBar{position:absolute;top:0;right:0;width:8px;height:100%;background-color:transparent;}
    .jspHorizontalBar{position:absolute;bottom:0;left:0;width:100%;height:8px;background-color:transparent;}
    .jspVerticalBar *,.jspHorizontalBar *{margin:0;padding:0;}
    .jspCap{display:none;}
    .jspHorizontalBar .jspCap{float:left;}
    .jspTrack{
      position:relative;
      background-color:transparent;
    }
    .jspDrag{background:#ccc;position:relative;top:0;left:0;cursor:pointer;border:1px solid #333;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
    .jspHorizontalBar .jspTrack,.jspHorizontalBar .jspDrag{float:left;height:100%;}
    .jspArrow{background:#50506d;text-indent:-20000px;display:block;cursor:pointer;}
    .jspArrow.jspDisabled{cursor:default;background:#80808d;}
    .jspVerticalBar .jspArrow{height:8px;}
    .jspHorizontalBar .jspArrow{width:8px;float:left;height:100%;}
    .jspVerticalBar .jspArrow:focus{outline:none;}
    .jspCorner{background:#eeeef4;float:left;height:100%;}
    /* Yuk! CSS Hack for IE6 3 pixel bug :( */
    * html .jspCorner{margin:0 -3px 0 0;}
    .jp-container{width:400px;height:400px;position:relative;background-color: #333;float:left;overflow: auto;}

    /*讨论区*/
    .jp-container .talk_recordbox{
      min-height:80px;
      color: #afafaf;
      padding-top: 5px;
      padding-right: 10px;
      padding-left: 10px;
      padding-bottom: 0px;
    }

    .jp-container .talk_recordbox:first-child{border-top:none;}
    .jp-container .talk_recordbox:last-child{border-bottom:none;}
    .jp-container .talk_recordbox .talk_recordtextbg{
      float:left;
      width:10px;
      height:30px;
      display:block;
      background-repeat: no-repeat;
      background-position: left top;}
    .jp-container .talk_recordbox .talk_recordtext{
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
      border-radius:5px;
      background-color:#b8d45c;
      width:240px;
      height:auto;
      display:block;
      padding: 5px;
      float:left;
      color:#333333;
    }
    .jp-container .talk_recordbox h3{
      font-size:14px;
      padding:2px 0 5px 0;
      text-transform:uppercase;
      font-weight: 100;

    }
    .jp-container .talk_recordbox .user {
      float:left;
      display:inline;
      height: 45px;
      width: 45px;
      margin-top: 0px;
      margin-right: 5px;
      margin-bottom: 0px;
      margin-left: 0px;
      font-size: 12px;
      line-height: 20px;
      text-align: center;
    }
    /*自己发言样式*/
    .jp-container .talk_recordboxme{
      display:block;
      min-height:80px;
      color: #afafaf;
      padding-top: 10px;
      /* padding-right: 10px; */
      padding-left: 5px;
      padding-bottom: 0px;
    }
    .jp-container .talk_recordboxme .talk_recordtextbg{
      float:right;
      width:10px;
      height:30px;
      display:block;
      background-repeat: no-repeat;
      background-position: left top;}

    .jp-container .talk_recordboxme .talk_recordtext{
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
      border-radius:5px;
      background-color:#fcfcfc;
      width:240px;
      height:auto;
      padding: 5px;
      color:#666;
      font-size:12px;
      float:right;

    }
    .jp-container .talk_recordboxme h3{
      font-size:14px;
      padding:2px 0 5px 0;
      text-transform:uppercase;
      font-weight: 100;
      color:#333333;

    }
    .jp-container .talk_recordboxme .user{
      float:right;
      height: 45px;
      width: 45px;
      margin-top: 0px;
      margin-right: 10px;
      margin-bottom: 0px;
      margin-left: 5px;
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      display:inline;
    }
    .testDiv::-webkit-scrollbar { width: 12px;}/* 滚动槽 */
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;}/* 滚动条滑块 */
::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4);}

    .talk_time{
      color: #666;
      text-align: right;
      width: 240px;
      display: block;
    }
    </style>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <div class="talk">
    	<div class="talk_title"><span></span></div>
    	<div class="talk_record">
    		<div id="jp-container" class="jp-container">
    		</div>
    	</div>
    	<div class="talk_word">
    		&nbsp;
    		<input class="messages emotion" autocomplete="off" value=""/>
        <input class="talk_send" id='btn' type="button" title="" value="发送" />
    	</div>
    </div>
  </body>
</html>
<script type="text/javascript">
  var wsServer = 'ws://192.168.145.3:9501';
  var websocket = new WebSocket(wsServer);

  function gettime()
  {
    var date = new Date();
    return date.getFullYear() + "年"+ date.getMonth() + "月" + date.getDate() + "日 " + date.getHours() + '时' + date.getMinutes() + "分" + date.getSeconds()+"秒";
  }

  var nowtime = gettime();

  websocket.onopen = function (evt) {
      console.log("Connected to WebSocket server");
  };

  websocket.onclose = function (evt) {
      console.log("Disconnected");
  };

  websocket.onmessage = function (evt) {

      var admin = '	<div class="talk_recordbox"><div class="user"><span style="background-color:pink;width:50px;height:50px;display:block;border-radius:50%;"></span>机器人</div><div class="talk_recordtextbg">&nbsp;</div><div class="talk_recordtext"><h3>'+ evt.data +'</h3><span class="talk_time">'+ nowtime +'</span></div></div>'
      $(".jp-container").append(admin);
  };

  websocket.onerror = function (evt, e) {
      console.log('Error occured: ' + evt.data);
  };

  // 板顶点击事件，发送请求信息
  $("#btn").click(function(){
    var val = $(".emotion").val();

    if(val == "" || val == null || val == undefined)
    {
      alert("不能为空");
      return;
    }
    $(".emotion").val('');
    nowtime = gettime();
    var html = '<div class="talk_recordboxme"><div class="user"><span style="background-color:#ff0000;width:50px;height:50px;display:block;border-radius:50%;"></span>小明</div><div class="talk_recordtextbg">&nbsp;</div><div class="talk_recordtext"><h3>'+ val +'</h3><span class="talk_time">'+nowtime+'</span></div></div>';

    $(".jp-container").append(html);

    // 发送信息
    websocket.send(val);

    // 接受返回值
    websocket.onmessage = function (evt) {
        nowtime = gettime();
        var admin = '	<div class="talk_recordbox"><div class="user"><span style="background-color:pink;width:50px;height:50px;display:block;border-radius:50%;"></span>机器人</div><div class="talk_recordtextbg">&nbsp;</div><div class="talk_recordtext"><h3>'+ evt.data +'</h3><span class="talk_time">'+ nowtime +'</span></div></div>'
        $(".jp-container").append(admin);
    };
  })

</script>

服务端：

注意这一块要以cli的方式运行，其实就是在系统中，输入php server.php

<?php

# 创建websokcet对象
$ws = new Swoole\WebSocket\Server('0.0.0.0',9501);

# 建立链接
$ws->on('Open',function($ws,$request){
  $ws->push($request->fd,"您好？欢迎光临,我是机器人默生. \n ");
});

# 接受信息，并返回到webSoket中
$ws->on("Message",function($ws,$frame){

  echo "Message {$frame->data} \n ";
	# 返回的值
  $arr = [
    '山中何事？松花酿酒，春水煎茶。',
    '远远围墙，隐隐茅堂。飏青旗、流水桥旁。',
    '两水夹明镜，双桥落彩虹。',
    '山中无甲子，寒尽不知年。',
    '窗间梅熟落蒂，墙下笋成出林。',
    '人烟寒橘柚，秋色老梧桐。',
    '连雨不知春去，一晴方觉夏深。',
    '折梅逢驿使，寄与陇头人。',
    '浪花有意千重雪，桃李无言一队春。',
    '燕子不归春事晚，一汀烟雨杏花寒。',
    '今夜偏知春气暖，虫声新透绿窗纱。',
    '况是青春日将暮，桃花乱落如红雨。',
    '笑入荷花去，佯羞不出来。',
    '砌下落花风起，罗衣特地春寒。',
    '我是梦中传彩笔，欲书花叶寄朝云。',
    '别有玉盘承露冷，无人起就月中看。',
    '细雨湿衣看不见，闲花落地听无声。',
  ];
  # 返回信息
  $ws->push($frame->fd,$arr[rand(0,15)]);
});

# 关闭链接
$ws->on("Close",function($ws,$fd){
  echo "Client - {$fd} is closed \n";
});

# 启动服务
$ws->start();

 ?>