摘于抄书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. jquery-时间轴滑动

    效果预览图: html: <div class="tim"> <div class="timdiv"> <div class=&q ...

  2. 链接收藏：bullet物理引擎不完全指南

    这个也是博客园的文章,编辑得也很好,就不copy了,结尾还有PDF: https://www.cnblogs.com/skyofbitbit/p/4128347.html 完结

  3. vue多层传递$attrs

    今天在使用$attrs的时候遇到一个问题: 父组件: <PanelContainer name="正向舆情"> <PositiveOpinion opinion= ...

  4. PHP实现大文件上传和下载

    一提到大文件上传,首先想到的是啥??? 没错,就是修改php.ini文件里的上传限制,那就是upload_max_filesize.修改成合适参数我们就可以进行愉快的上传文件了.当然啦,这是一般情况下 ...

  5. 最小生成树（Kruskal算法）模板

    #include<iostream> #include<algorithm> using namespace std; ],n; struct node { int u,v,v ...

  6. APK文件结构和安装过程

    APK文件结构Android应用是用Java编写的,利用Android SDK编译代码,并且把所有的数据和资源文件打包成一个APK (Android Package)文件,这是一个后缀名为.apk的压 ...

  7. React-Native 之 GD （三）近半小时热门

    1.设置页面跳转 半小时热门组件  GDHalfHourHot.js /** * 近半小时热门 */ import React, { Component } from 'react'; import ...

  8. el-date-picker用法

    需求:1.默认时间是当天开始到此刻的时间 2.快捷键为今天.昨天.最近一周.最近30天.最近90天 3.不可以清空,必选项

  9. C# 防火墙操作之创建规则

    对于某些程序,我们只允许它使用某些特定端口.网络类型或者特定IP类型等信息.这时候,需要使用到防火墙里面的“高级设置”,创建某些特定的入站或者出栈规则,以规避其程序使用允许端口等意外的信息. 下面以创 ...

  10. 测开之路一百零二：jquery元素操作

    jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 ...