zoukankan      html  css  js  c++  java
  • 在IIS上搭建WebSocket服务器(三)

    编写客户端代码

    1.新建一个*.html文件。

    ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
    这个地方的IP和端口号对应着我们搭建在IIS上的WebSocket服务器
    复制代码
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
        <title></title>
        <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
        <script>
            var ws;
            $().ready(function () {
                $('#conn').click(function () {
                    //ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
                    ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
                    //var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
                    //var host = "ws://192.168.85.128:8085/api/WSChat";
                    //webSocket = new WebSocket(host);
                    
                    $('#msg').append('<p>正在连接</p>');
    
                    ws.onopen = function () {
                        $('#msg').append('<p>已经连接</p>');
                    }
                    ws.onmessage = function (evt) {
                        $('#msg').append('<p>' + evt.data + '</p>');
                    }
                    ws.onerror = function (evt) {
                        $('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
                    }
                    ws.onclose = function () {
                        $('#msg').append('<p>已经关闭</p>');
                    }
                });
    
                $('#close').click(function () {
                    ws.close();
                });
    
                $('#send').click(function () {
                    if (ws.readyState == WebSocket.OPEN) {
                        ws.send($("#to").val() + "|" + $('#content').val());
                    }
                    else {
                        $('#tips').text('连接已经关闭');
                    }
                });
    
            });
        </script>
    </head>
    <body>
        <div>
            <input id="user" type="text" />
            <input id="conn" type="button" value="连接" />
            <input id="close" type="button"  value="关闭"/><br />
            <span id="tips"></span>
            <input id="content" type="text" />
            <input id="send" type="button"  value="发送"/><br />
            <input id="to" type="text" />目的用户
            <div id="msg">
            </div>
        </div>
    </body>
    </html>
    复制代码

    2.客户端A和客户端B通信效果

    在浏览器中分别打开两个窗口,左边为客户端A,右边为客户端B,点击“连接”按钮,AB客户端分别与服务器建立连接

    填写要发送的内容,即可看到A和B互相发送的信息了,即实现了AB客户端实现了WebSocket即时通信。

  • 相关阅读:
    node.js学习二---------------------同步API和异步API的区别
    node.js学习一---------------------模块的导入
    ES6函数的特性(箭头语法)
    10分钟了解Android的Handler机制
    10分钟了解Android的事件分发
    SwipeRefreshLayout,用最少的代码定制最美的上下拉刷新样式
    手把手教你React Native 实战之开山篇《一》
    Android 组件化方案探索与思考
    2018谷歌I/O开发者大会8大看点汇总 新品有哪些
    Glide高级详解—缓存与解码复用
  • 原文地址:https://www.cnblogs.com/zxtceq/p/7278169.html
Copyright © 2011-2022 走看看