开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

在IIS上搭建WebSocket服务器(三)

简介: 原文:在IIS上搭建WebSocket服务器(三) 编写客户端代码 1.新建一个*.html文件。 ws = new WebSocket('ws://192.168.85.128:8086/Handler1.
+关注继续查看
原文:在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即时通信。

 

 

 

 

 

 

 

 

 

end

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SpringBoot整合Netty搭建高性能Websocket服务器(实现聊天功能)
之前使用Springboot整合了websocket,实现了一个后端向前端推送信息的基本小案例,这篇文章主要是增加了一个新的框架就是Netty,实现一个高性能的websocket服务器,并结合前端代码,实现一个基本的聊天功能。你可以根据自己的业务需求进行更改。 这里假设你已经了解了Netty和websocket的相关知识,仅仅是想通过Springboot来整合他们。根据之前大家的需求,代码已经上传到了github上。在文末给出。 废话不多说,直接看步骤代码。
0 0
netty系列之:使用netty搭建websocket服务器
netty系列之:使用netty搭建websocket服务器
0 0
JavaScript 服务器推送技术之 WebSocket
短轮询最简单,在一些简单的场景也会经常使用,就是隔一段时间就发起一个ajax请求。那么长轮询是什么呢? 长轮询(Long Polling)是在Ajax轮询基础上做的一些改进,在没有更新的时候不再返回空响应,而且把连接保持到有更新的时候,客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。它是一个解决方案,但不是最佳的技术方案。
0 0
WebSocket服务器和客户端的一对多连接
假设我有两个客户端连接了WebSocket服务器:我用下图两个Chrome tab表示:
0 0
步骤5 - Orchestra从微服务提供商获得结果,再发送回WebSocket服务器
步骤5 - Orchestra从微服务提供商获得结果,再发送回WebSocket服务器
0 0
步骤6 - WebSocket服务器把请求的响应结果推送给webshop
首先,WebSocket 仍然是作为TCP客户端接收从Orchestra发送过来的数据:
0 0
WebSocket服务器上的oTransactionID_SiteDetailMap的qrcode是何时生成的
WebSocket服务器上的oTransactionID_SiteDetailMap的qrcode是何时生成的
0 0
WebSocket服务器和客户端的一对多通知实现
依次启动Orchestra,websocket server for KOI app和WebSocket server for Webshop,也就是总共启动三台服务器。
0 0
WebSocket服务器TransactionID_SiteDetailMap的析构工作
当WebSocket客户端和服务器断开连接后,服务器捕捉到连接中断事件,需要析构掉服务器端为这个客户端连接维护的一些数据结构,以释放资源。 其中一个待释放的资源就是oTransactionID_SiteDetailMap
0 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
网站/服务器取证 实践与挑战
立即下载
网站/服务器取证实践与挑战
立即下载
服务器迁移到阿里云的step by step
立即下载