摘于抄书web前端开发

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

        <script type="text/javascript" src="https://code.jquery.com/jquery- 3.4.0.min.js"></script>

    </head>

    <body>

        <div id="showMessage">

        </div>

        <div id="addMessage">

            姓名：<input type="text" name="namer" /><br>

            内容：<textarea style="height:100px;width:100%" name="content"> </textarea><br>

            <input type="button" id="sendmessage" value="发送">

        </div>

    </body>

    <script type="text/javascript">

        $(function() {

            //连接Socket的URL地址

            var wsurl = "ws://127.0.0.1:9505/socket/server.php";

            var websocket; //用于存放客户端创建的Socket对象

            if (window.WebSocket) {

                websocket = new WebSocket(wsurl);

                websocket.onopen = function(event) {

                    //onopen事件，连接成功

                    $('#showMessage').append("<p>conneted success!</p>");

                }

                websocket.onmessage = function(event) {

                    //onmessage事件，接收消息，显示在页面上

                    var msg = JSON.parse(event.data);

                    var type = msg.type;

                    var namer = msg.namer;

                    var content = msg.content;

                    if (type == 'usermsg') {

                        $('#showMessage').append("<p>" + namer + ":" + content + "</p>");

                    } else {

                        $('#showMessage').append("<p>system:" + content + "</p>");

                    }

                }

                //数据发送

                function send() {

                    var namer = $("[name='namer']").val();

                    var content = $("[name='content']").val();

                    if (namer == '') {

                        alert('请输入名称');

                        return false;

                    }

                    if (content == '') {

                        alert('请输入内容');

                        return false;

                    }

                    var msg = {

                        namer: namer,

                        content: content

                    };

                    websocket.send(JSON.stringify(msg));

                }

                $("#sendmessage").bind('click', send);

            }

        })

    </script>

</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. Kohana重写接收不到get参数问题

    .htaccess,不需要重启apache # Turn on URL rewriting RewriteEngine On # Installation directory RewriteBase ...

  2. [LOJ2289][THUWC2017]在美妙的数学王国中畅游：Link-Cut Tree+泰勒展开

    分析 又有毒瘤出题人把数学题出在树上了. 根据泰勒展开,有: \[e^x=1+\frac{1}{1!}x+\frac{1}{2!}x^2+\frac{1}{3!}x^3+...\] \[sin(x)= ...

  3. js 在输出到页面的5中方式

    1.alert("要输出的内容"); ->在浏览器中弹出一个对话框,然后把要输出的内容展示出来 ->alert都是把要输出的内容首先转换为字符串然后在输出的 2.doc ...

  4. uva live 7637 Balanced String （贪心）

    题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...

  5. Linux超全实用指令大全

    参考 Linux超全实用指令大全

  6. Ubuntu启动 卡在checking battery state 解决方案

    Ubuntu启动,卡在checking battery statALT + F1或者CTRL+ALT+F6切换到命令行[CTRL+ALT+F7返回界面]执行 sudo gdm start后就可以正常登 ...

  7. docker学习与应用

    概要 众所周知,Docker是当前非常火的虚拟化容器技术,对于它的优势以及使用场景网上的资料非常多,这里我推荐大家去这个网站去详细学习docker. 我这里就写一下作为一名后端开发程序员,自己学习do ...

  8. 安装python是提示 0x80072f7d 错误的解决办法

    最简单的方法: Internet 选项-> 高级里面 勾选使用TLS1.1和使用TLS1.2即可.实际测试是ok的

  9. SpringBoot系列：三、SpringBoot中使用Filter

    在springboot中要使用Filter首先要实现Filter接口,添加@WebFilter注解 然后重写三个方法,下图示例是在Filter中过滤上一届中拿配置的接口,如果是这个接口会自动跳转到/P ...

  10. spring监听机制——观察者模式的应用

    使用方法 spring监听模式需要三个组件: 1. 事件,需要继承ApplicationEvent,即观察者模式中的"主题",可以看做一个普通的bean类,用于保存在事件监听器的业 ...