在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

目录
相关文章
|
8月前
|
Java 应用服务中间件 网络安全
在手机上app中链接或者浏览器上访问电脑上Tomcat搭建的服务器以及其内容
在手机上app中链接或者浏览器上访问电脑上Tomcat搭建的服务器以及其内容
150 0
在手机上app中链接或者浏览器上访问电脑上Tomcat搭建的服务器以及其内容
|
8月前
|
网络安全 开发工具 数据安全/隐私保护
gitlab在服务器上的安装与配置-自己搭建一个gitlab服务器
gitlab在服务器上的安装与配置-自己搭建一个gitlab服务器
615 0
|
8月前
|
应用服务中间件 测试技术 nginx
软件测试|Docker 搭建Web服务器nginx
软件测试|Docker 搭建Web服务器nginx
161 0
软件测试|Docker 搭建Web服务器nginx
|
8月前
|
NoSQL Redis CDN
分布式服务器框架之搭建C#+MongoDB+Redis初步
WebAccount站点主要干的事儿是下发 服务器状态信息,这个服务器会和WorldServer建立连接,等所有的GameServer初始化完成之后会同步给WorldServer,WorldServer同步给账号服务器站点,然后账号站点等待玩家请求。
|
8月前
|
NoSQL 算法 中间件
分布式服务器框架之搭建C#+MongoDB+Redis初步
Common类库主要做的是一些大家都需要用到的通用的事情,为了避免重复,所以就提取出来了一个Dll。Common库主要是实现了表格数据的加载模块、在CsRedisClient、MongoClient中间件的基础上进行二次封装。实现了数据库连接、Redis连接、以及数据库和Redis的增删改查断开操作。
|
9月前
|
弹性计算 移动开发 Ubuntu
阿里云上搭建HLS直播服务器
通过将摄像头的rtmp视频流推送到服务器,转换成HLS(HTTP Live Streaming)格式,用户可以通过H5浏览器直接打开直播视频。
442 0
|
9月前
|
Linux Shell 数据安全/隐私保护
CentOS 搭建SVN服务器
CentOS 搭建SVN服务器
184 0
CentOS 搭建SVN服务器
搭建自己的发送邮件服务器
搭建自己的发送邮件服务器
搭建自己的发送邮件服务器
|
9月前
|
消息中间件 关系型数据库 Shell
MacOS下的AMQP服务器以及PHP扩展搭建
MacOS下的AMQP服务器以及PHP扩展搭建
248 0
|
9月前
|
存储 数据可视化 Java
【日志审计】极易上手搭建自己日志采集服务器分析日志(winlogbeat+Elasticsearch+Kibana)
【日志审计】极易上手搭建自己日志采集服务器分析日志(winlogbeat+Elasticsearch+Kibana)
282 0
【日志审计】极易上手搭建自己日志采集服务器分析日志(winlogbeat+Elasticsearch+Kibana)
相关产品
云迁移中心
推荐文章
更多