摘于抄书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. 华为云服务器centos7.3安装tomcat

    1. 进入tomcat官网,复制下载地址 https://tomcat.apache.org/download-80.cgi#8.5.47 鼠标右键,复制链接地址:http://mirrors.tun ...

  2. favicon.ico是什么？

    一.什么是favicon? 所谓favicon,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站.favicon 中文名称:网页图标  英文名称:favorites ico ...

  3. HDU 2243 考研路茫茫——单词情结 ( Trie图 && DP && 矩阵构造幂和 )

    题意 :  长度不超过L,只由小写字母组成的,至少包含一个词根的单词,一共可能有多少个呢?这里就不考虑单词是否有实际意义. 比如一共有2个词根 aa 和 ab ,则可能存在104个长度不超过3的单词, ...

  4. 详解HASH(字符串哈希)

    HASH意为(散列),是OI的常用算法. 我们常用哈希的原因是,hash可以快速(一般来说是O(段长))的求出一个子段的hash值,然后就可以快速的判断两个串是否相同. 今天先讲string类的has ...

  5. android 启动默认的邮件客户端，多附件的问题

    目前开发的app中需要发送邮件,所以需要调用android默认的邮件客户端,并需要添加多个邮件附件,我该通过哪个组件调用默认的客户端?用什么组件来支持多个附件的电子邮件? 是通过下面的哪一个?(Int ...

  6. 使用chooseImage上传图片，不压缩，使用原图

    参考文章: https://help.aliyun.com/document_detail/92883.html

  7. [ethereum源码分析](1) dubug环境搭建

    前言 因为最近云小哥哥换了一份工作,新公司比较忙,所以一直没有更新新的博客.云小哥哥新的公司是做区块链的,最近在学习区块链相关的东西(也算是乘坐上了区块链这艘大船).本博客是记录我搭建ethereum ...

  8. Python 元组遍历排序操作方法

    在Python不可变数据类型中,有一个比较重要的角色那就是元组( tuple ).如果某个对像被定义为元组类型,那么就意味着它的值不能被修改,除非重新定义一个新的对像.元组和List列表常被放在一起进 ...

  9. 8 Django模型层(1)

    知识预览 ore简介 单表操作 章节作业 ore简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可 ...

  10. 《SQL Server 2012 T-SQL基础》读书笔记 - 10.可编程对象

    Chapter 10 Programmable Objects 声明和赋值一个变量: DECLARE @i AS INT; SET @i = 10; 变量可以让你暂时存一个值进去,然后之后再用,作用域 ...