zoukankan      html  css  js  c++  java
  • js 和 winform 中使用WebSocket

    由于最近学习Socket相关知识,所以也研究了WebSocket

    由于前面篇幅都有介绍socket相关知识,网上也有很多资料

    此处就推荐一个js中的websocket教程:http://www.ruanyifeng.com/blog/2017/05/websocket.html

    这篇主要是代码共享和学习交流:由于学习时,不记得是从哪个网上下载的源码,抱歉!

    cs源码主要使用HttpListener和WebSocket实现服务器和客户端

    js中主要实现WebSocket客户端 

    最底下,有源码可供下面

    1、cs功能简单介绍

    服务器界面:开启、关闭监听,广播数据给客户端

    客户端界面:开启、关闭连接,发送数据给服务端

    服务器端:可以广播多个客户端

    客户端:发送数据给服务端,服务端接收数据后又自动广播给其它客户端

    2、js功能简单介绍

    服务端开启监听,网页客户端中连接服务端,服务端广播数据,网页客户端接收并显示数据

    网页客户端:输入数据点击提交,服务器收到客户端的消息

     

    js代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>简单使用js中的websocket</title>
    </head>
    <body>
        <div>
            <form id="Form">
                <label id="address">服务端地址:</label>
                <input name="" id="IpAddress" value="ws://127.0.0.1:8011" />
                <button type="submit" onclick="Connect();">连接</button><br />
    
                <label id="name">name</label>
                <input name="" id="ValueName" value="" /> 
                <label id="course">course</label>
                <input name="" id="ValueCourse" value="" />
                <button type="submit" onclick="SendData();">提交</button><br />
    
            </form>
            <div id="txtInfo" style="border: dashed 1px black; height: 500px;  500px; margin-top: 10px;">
            </div>
        </div>
    
        <script type="text/javascript">
                //连接服务器
                function Connect() {
    
                var print = document.getElementById('txtInfo');
                var form = document.getElementById('Form');
                //var inputStrA = document.getElementById('ValueA');
                var ipaddress = document.getElementById('IpAddress').value;
    
                print.innerHTML += "connecting to server ..<br/>";
    
                //参数即想要连接服务器的ip。 服务器可以是node.js, 也可以是其他项目,如c#
                //window.ws = new WebSocket('ws://10.206.14.152:8080/'); //连接服务
                //window.ws = new WebSocket('ws://192.168.43.78:8080/'); //连接服务
                window.ws = new WebSocket(ipaddress); //连接服务
    
    
                //监听消息状态
                ws.onmessage = function (msg) {
                    var jsobj = JSON.parse(msg.data);//json字符串转为对象
                    console.log('msg='+msg);
                    document.getElementById('ValueName').value = jsobj.Name;    //写入输入框中
                    document.getElementById('ValueCourse').value = jsobj.Course;
    
                    print.innerHTML += msg.data + '<br/>'
                }
                //监听链接状态
                ws.onopen = function () {
                    print.innerHTML += 'connection open <br/>'
                }
                //监听关闭状态
                ws.onclose = function () {
                    print.innerHTML += 'connection closed<br/>';
                }
                //监听连接失败
                ws.onerror = function(){
                    print.innerHTML += 'connection error<br/>'; 
                };
    
                //向服务器端发送消息
                form.addEventListener('submit', function (e) {
                    e.preventDefault();
                    //序列化后的字符串发给服务端,服务端以字节数组格式接收,若转成字符串并添加部分信息再转回字节数组时,string.format函数会报错
                    //var jsonObj = { "name": "zhangsan", "age": 18 };
                    //传入一个json字符串进行测试,服务器会进行判断。
                    //ws.send(JSON.stringify(jsonObj));
                    //ws.send(jsonObj);
                    //传入一个非json字符串进行测试,服务器会进行判断。
                    //ws.send("test");
                })
            } 
      
            //发送数据
            function SendData() {
                var valueName = document.getElementById('ValueName').value;
                var valueCourse = document.getElementById('ValueCourse').value;
    
                if (valueName.length == 0) { valueName = "-"; }
                if (valueCourse.length == 0) { valueCourse = "-"; }
    
                var jsonobj = {
                    "Name": valueName,
                    "Course": valueCourse
                };
                var jsonstr = JSON.stringify(jsonobj);
    
                //初始化WebSocket
                //InitWebSocket();
                //如果WebSocket打开,发送数据
                if (ws.OPEN && ws.readyState == 1) {
                    //send(); 发送数据   WebSocket通过send()方法向服务器端发送请求,onmessage 接收数据
                    ws.send(jsonstr);
                }
                console.log(ws.readyState);
                //如果WebSocket关闭,显示消息
                if (ws.readyState == 2 || ws.readyState == 3) {
                    console.log("进来关闭函数了")
                    alert("WebSocket关闭了,无法发送数据");
                }
            }
        </script>
    
    </body>
    </html>
    View Code

    由于cs源码内容偏多,就不在此列出,需要的可以下载源码做参考

    源码下载

  • 相关阅读:
    14.5.5 Creating a File-Per-Table Tablespace Outside the Data Directory
    14.5.5 Creating a File-Per-Table Tablespace Outside the Data Directory
    php session 管理
    php session 管理
    CURD特性
    RabbitMQ学习总结(1)——基础概念详细介绍
    RabbitMQ学习总结(1)——基础概念详细介绍
    RabbitMQ学习总结(1)——基础概念详细介绍
    Java基础学习总结(39)——Log4j 1使用教程
    Java基础学习总结(39)——Log4j 1使用教程
  • 原文地址:https://www.cnblogs.com/ggll611928/p/15749759.html
Copyright © 2011-2022 走看看