使用jQuery实现Socket客户端

本文转载自查看原文 2019-12-04 19:49 488 聊天系统

摘于抄书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为成功

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 C#使用Socket实现一个socket服务器与多个socket客户端通信 C#使用Socket实现一个socket服务器与多个socket客户端通信使用Socket访问redis客户端 Java中使用Socket实现服务器端和客户端通讯 Socket 服务端使用多线程实现多客户端通讯实例使用Socket编程实现服务端和客户端响应 socket实现客户端和服务端客户端 SOCKET 编程 Python socket的客户端 Java使用多线程实现Socket多客户端的通信