使用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刪除。

猜您在找 使用Socket編程實現服務端和客戶端響應 socket實現客戶端和服務端網絡編程之Socket的TCP協議實現客戶端與客戶端之間的通信 Java通過Socket實現TCP/IP協議的通信（客戶端）制作wp7郵箱客戶端之socket基礎實現 C++客戶端程序（socket） cross socket tcp客戶端開發 Socket網絡編程--FTP客戶端 java 界面編程用socket實現服務端與客戶端的循環通信。 windows socket 服務端使用線程連接多個客戶端