摘于抄书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. Spring read-only="true" 只读事务的一些概念

    概念:从这一点设置的时间点开始(时间点a)到这个事务结束的过程中,其他事务所提交的数据,该事务将看不见!(查询中不会出现别人在时间点a之后提交的数据) 应用场合: 如果你一次执行单条查询语句,则没有必 ...

  2. Mysql数据库常见试题

    引用自http://blog.csdn.net/laoniyouxi123/article/details/51161157 sql语句应该考虑哪些安全性? 答: (1)防止sql注入,对特殊字符进行 ...

  3. 清北学堂算法&&数据结构DAY1——知识整理

    简述: 今天主要讲分治(主要是二分).倍增.贪心.搜索,还乱入了爬山算法和模拟退火(汗...) 一.分(er)治(fen): 二分是个在OI中广泛运用的思想,随便举些例子,就足以发现二分的运用的广泛性 ...

  4. 微信小程序支付 java

    原文:https://blog.csdn.net/zhourenfei17/article/details/77765585 话不多说,直接开撸. 支付流程步骤: 1)首先调用wx.login方法获取 ...

  5. LuceneNET全文检索封装

    一.源码特点       1.  Lucene.net是Lucene的.net移植版本,是一个开源的全文检索引擎开发包,即它不是一个完整的全文检索引擎,而是一个全文检索引擎的架构,提供了完整的查询引擎 ...

  6. leetcode-mid-array-334 Increasing Triplet Subsequence-NO

    mycode   time limited class Solution(object): def increasingTriplet(self, nums): """ ...

  7. Delphi XE2 之 FireMonkey 入门(1)

    Delphi XE2 的 FireMonkey 是跨平台的, 暂时只准备看看它在 Windows 下(我是 32 位 Win7)的应用情况. 很新的东西, 相信有了它, 以后的界面将会更灵活.漂亮, ...

  8. KETTLE——（三）数据输出

    数据输出和数据输入基本差不多,KETTLE本身支持的数据输出方式也特别多,还是以数据库输出为例. ​ 打开表输出的界面,简单介绍一下其功能: ​ 就这个界面,如果不勾选[指定数据库字段],KETTLE ...

  9. pandas 基础介绍与概览

    pandas是 基于NumPy数组构建的,特别是基于数组的函数和不使用for循环的数据处理 相关联的几个库, 分析库 scikit-learn 和 statsmodels 数值计算工具,NumPy 可 ...

  10. laravel使用artisan报错SQLSTATE[42S02]: Base table or view not found: 1146

    说明你在应用初始化阶段使用到了数据库层面的东西,然而当时数据库不存在这个表/字段,所以会报错 需要在初始化比如 config 目录配置中,使用了数据库,在使用前需要添加一层判断,如果不存在 你需要用到 ...