摘于抄书web前端开发

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Document</title>
  6.         <script type="text/javascript" src="https://code.jquery.com/jquery- 3.4.0.min.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="showMessage">
  10.  
  11.         </div>
  12.         <div id="addMessage">
  13.             姓名：<input type="text" name="namer" /><br>
  14.             内容：<textarea style="height:100px;width:100%" name="content"> </textarea><br>
  15.             <input type="button" id="sendmessage" value="发送">
  16.         </div>
  17.     </body>
  18.     <script type="text/javascript">
  19.         $(function() {
  20.             //连接Socket的URL地址
  21.             var wsurl = "ws://127.0.0.1:9505/socket/server.php";
  22.             var websocket; //用于存放客户端创建的Socket对象
  23.             if (window.WebSocket) {
  24.                 websocket = new WebSocket(wsurl);
  25.                 websocket.onopen = function(event) {
  26.                     //onopen事件，连接成功
  27.                     $('#showMessage').append("<p>conneted success!</p>");
  28.                 }
  29.                 websocket.onmessage = function(event) {
  30.                     //onmessage事件，接收消息，显示在页面上
  31.                     var msg = JSON.parse(event.data);
  32.                     var type = msg.type;
  33.                     var namer = msg.namer;
  34.                     var content = msg.content;
  35.                     if (type == 'usermsg') {
  36.                         $('#showMessage').append("<p>" + namer + ":" + content + "</p>");
  37.                     } else {
  38.                         $('#showMessage').append("<p>system:" + content + "</p>");
  39.                     }
  40.                 }
  41.                 //数据发送
  42.                 function send() {
  43.                     var namer = $("[name='namer']").val();
  44.                     var content = $("[name='content']").val();
  45.                     if (namer == '') {
  46.                         alert('请输入名称');
  47.                         return false;
  48.                     }
  49.                     if (content == '') {
  50.                         alert('请输入内容');
  51.                         return false;
  52.                     }
  53.                     var msg = {
  54.                         namer: namer,
  55.                         content: content
  56.                     };
  57.                     websocket.send(JSON.stringify(msg));
  58.                 }
  59.                 $("#sendmessage").bind('click', send);
  60.             }
  61.         })
  62.     </script>
  63. </html>

1、启动服务端

命令行中

你的PHP文件

c:\>.php7\php www\socket\server.php

如果报错或者有问题

把PHP程序（学校的：C:\phpstudy_pro\Extensions\php\php7.3.4nts）添加环境变量

应该就可以了

2、打开两个网页

conneted success为成功

使用jQuery实现Socket客户端的更多相关文章

  1. java版简易socket客户端

    android项目需要使用到心跳, 于是编写了一个简易的socket客户端程序 主要功能是给服务端发送心跳包,保持在线状态 没有使用框架,这样避免了需要引入包,直接使用的阻塞Socket通信. 主要逻 ...

  2. 基于Socket客户端局域网或广域网内共享同一短信猫收发短信的开发解决方案

    可使同一网络(局域网或广域网)内众多客户端,共享一个短信猫设备短信服务器进行短信收发,短信服务器具备对客户端的管理功能. 下面是某市建设银行采用本短信二次开发平台时实施的系统方案图: 在该方案中,考虑 ...

  3. c++ socket 客户端库 socks5 客户端 RudeSocket™ Open Source C++ Socket Library

    介绍 一个c++ socket 客户端库 http://www.rudeserver.com/socket/index.html The RudeSocket™ Open Source C++ Soc ...

  4. (转)[jQuery]使用jQuery.Validate进行客户端验证（初级篇）——不使用微软验证控件的理由

    以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...

  5. Python socket 客户端和服务器端

    connection, address = socket.accept() 调 用accept方法时,socket会时入“waiting”状态.客户请求连接时,方法建立连接并返回服务器.accept方 ...

  6. （转）jQuery Validation Plugin客户端表单证验插件

    jQuery Validation Plugin客户端表单验证插件 官方文档:http://jqueryvalidation.org/documentation/ 官方demo:http://jque ...

  7. 【RL-TCPnet网络教程】第20章 RL-TCPnet之BSD Socket客户端

    第20章      RL-TCPnet之BSD Socket客户端 本章节为大家讲解RL-TCPnet的BSD Socket,学习本章节前,务必要优先学习第18章的Socket基础知识.有了这些基础知 ...

  8. c# 创建socket客户端

    c# 创建socket客户端 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  9. socket 客户端和服务端通信

    客户端要连接服务器:首先要知道服务器的IP地址.而服务器里有很多的应用程序,每一个应用程序对应一个端口号 所以客户端想要与服务器中的某个应用程序进行通信就必须要知道那个应用程序的所在服务器的IP地址, ...

随机推荐

  1. IDEA将新建项目上传至GitLab

    1.首先,需要你自己登录GitLab,并新建一个项目的链接,如下图所示: (此图为图三,该链接下面操作中将会用到!) 2.在idea上新建一个项目,完成之后,需要创建一个git仓库: 3.然后可以根据 ...

  2. vim插件cscope使用方法

    一.安装cscope 安装方式比较多样,可以在各自linux软件管理工具中安装,也可以去官网下载安装. sudo apt-get install cscope 二.插件安装 这里选择的是Vundle来 ...

  3. 洛谷p3956 棋盘（NOIP2017 t3）

    在noip考场上本来以为只能骗暴力分,没想到最后A了: 本蒟蒻的做法比较简(zhi)单(zhang):记忆化深搜(考场上本来是想打广搜的,但我深搜稳一点就这样打了): 具体:每个点用一个f数组记录当前 ...

  4. （42）嵌入式项目中常用到的C语言技能总结

    嵌入式项目中常用到的C语言技能 1.指针 .结构体. 枚举. 联合.数组.字符串.链表七个专题 2.结构体指针.结构体的多重嵌套[结构体中嵌套结构体.结构体中嵌套枚举.联合体.结构体中嵌套函数指针.一 ...

  5. 3D Computer Grapihcs Using OpenGL - 01 环境设置

    这系列文章是我学习Youtube上一套OpenGL教程的笔记,自己对教程的案例重新制作并且做了一定程度的修改(更有条理,且修正了一些问题).后续将持续更新. Visual Studio 2017工程 ...

  6. Vue点击切换Class变化，实现Active当前样式

    刚自学Vue不久,所以还不太熟,所以直接上代码. 一.先在data里增加一个变量,用来储存当前点击的元素 data() { return { activeClass: -1, // 0为默认选择第一个 ...

  7. MySQL高可用方案 MHA之四 keepalived 半同步复制

    主从架构(开启5.7的增强半同步模式)master: 10.150.20.90   ed3jrdba90slave: 10.150.20.97    ed3jrdba97 10.150.20.132 ...

  8. ORA-20011

    Sun Jul 23 22:09:07 2017DBMS_STATS: GATHER_STATS_JOB encountered errors. Check the trace file.Errors ...

  9. (转)oracle触发器使用：after insert 与before insert的简单使用注意

    本文转载自:http://blog.csdn.net/kuangfengbuyi/article/details/41446125 创建触发器时,触发器类型为after insert , 在begin ...

  10. VMware 虚拟化编程(6) — VixDiskLib 虚拟磁盘库详解之二

    目录 目录 前文列表 VixDiskLib 虚拟磁盘库 VixDiskLib_Open 打开 VMDK File VixDiskLib_Read 读取 VMDK File 数据 VixDiskLib_ ...