摘于抄书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. Sublime Text3 使用Package Control 报错There Are No Packages Available For Installation 解决

    "channels": [ "https://packagecontrol.io/channel_v3.json"], 无法连接的问题 网上说了挺多原因,简单例 ...

  2. [luogu]P3939 数颜色[二分]

    [luogu]P3939 数颜色 题目描述 小 C 的兔子不是雪白的,而是五彩缤纷的.每只兔子都有一种颜色,不同的兔子可能有 相同的颜色.小 C 把她标号从 1 到 n 的 n 只兔子排成长长的一排, ...

  3. linux ubantu php composer安装

    root@iZwz93telmwbh624e5zetqZ:~# php -v PHP 5.6.40-14+ubuntu16.04.1+deb.sury.org+1 (cli) Copyright (c ...

  4. 基于BootStrap的分页代码实现

    public class PageUtil { //targetUrl 访问url totalNum总记录数 currentPage 当前页数 pageSize每页的大小 public static ...

  5. VMware 15 搭建MacOS 10.14教程

    写于2018.12.23 教程原文链接:https://pan.baidu.com/s/1wvNYg_MQH_lwewKbpCQ5_Q ———————————————————————————————— ...

  6. @ResponseBody返回4种数据格式的数据

    1.返回一个键值对或者集合 前端JS请求: //返回值为map的形式 $(".name").blur(function(){ $.ajax({ type:"Post&qu ...

  7. android 摇一摇功能的实现

    将这个功能封装成了一个类,这样今后方便调用 package com.bobo.myyaoyiyaotest; import android.R.bool; import android.content ...

  8. mktime夏令时处理

    https://www.cnblogs.com/dongzhiquan/archive/2011/11/05/2237075.html 我们的最终目的是把字符串格式的时间转换为内部使用的“日历时间”, ...

  9. nginx 入门 安装

    .yum解决编译nginx所需的依赖包,之后你的nginx就不会报错了 yum install gcc patch libffi-devel python-devel zlib-devel bzip2 ...

  10. 纯CSS3写一个立方体并在鼠标悬停的时候无限循环旋转