在IIS上搭建WebSocket服务器（三）

admin · 发表于 2018-11-7 00:42:00

编写客户端代码

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

ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
这个地方的IP和端口号对应着我们搭建在IIS上的WebSocket服务器

<!DOCTYPE html>
% N% t5 q' }2 _% R; H5 @
<html xmlns="http://www.w3.org/1999/xhtml">1 P4 w+ q) U( x" o3 q
<head>1 V( h" n- M. }2 y$ E5 B
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>$ ]4 z, o2 @% H' [4 O; ^/ D+ H4 p
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
) P4 ?/ d6 l, J. n& V- M
<title></title>
: J; z0 _( u* C, x: ~" k+ }: y
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>" Y- _5 D' {' h- j4 V+ e
<script>) q1 O) m# R$ W* H! X
var ws;, q% E; T$ N# L$ q
$().ready(function () {
# r; S9 J, ], L/ g/ n, l9 J) g9 C
$('#conn').click(function () {3 k) j5 B, p% a8 T5 \
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());$ B1 A# K% j. ~# j# t4 y
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());+ A+ a6 T. x0 H3 B4 H! Z& f
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val(); I1 q+ U1 C; S
//var host = "ws://192.168.85.128:8085/api/WSChat";
0 S( V# ^- [4 C) W
//webSocket = new WebSocket(host);
) ?( N4 q2 I; y( l
. R( `, c+ W4 o. S
$('#msg').append('<p>正在连接</p>');6 y2 m1 s( k2 l2 [
1 s8 }2 g F* ?6 q( d$ K; ^
ws.onopen = function () {. z4 H$ {4 b5 \! K; X& n
$('#msg').append('<p>已经连接</p>');
: I6 r( l3 s5 R& L0 H' h# n
}
8 x6 I2 s, p; @- u q" e! F
ws.onmessage = function (evt) {9 f8 F# r; p$ V9 t j* v1 c: e
$('#msg').append('<p>' + evt.data + '</p>');
}+ C& P; _) X- E) h2 t' I& V" B) C" y
ws.onerror = function (evt) {4 C+ V4 r" S0 j. k) S& t( y
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
4 h/ T) C' Q$ c1 D! j
} V/ ?8 R7 t4 U6 c/ d7 B
ws.onclose = function () {/ t# l/ m+ k) c. P8 R; b
$('#msg').append('<p>已经关闭</p>');. K2 y4 h/ K4 U8 ?4 P8 r
}
+ `) p9 ^5 h4 l+ w |9 C. x
});9 C$ Z1 Z& |) i0 G) ~/ ?. N
% o& I$ l! ~$ l9 [: u) z
$('#close').click(function () {
0 b6 d8 L3 _3 X" E6 V! e8 ?1 q9 [
ws.close();
! x, I5 H' j1 e
});% {( N; R& F4 ~8 A$ s
9 h3 X. E& Y0 b5 G, T5 l( U! `3 F
$('#send').click(function () {" O* A3 c& l# K1 d4 F M Q
if (ws.readyState == WebSocket.OPEN) {0 r( \% ~" E% L; e: r
ws.send($("#to").val() + "|" + $('#content').val());
, C; S, a9 F- b: | w$ s9 `
}
8 b; S; J8 H# y, `
else {4 X( M' G2 f' }8 W( Q7 x/ I
$('#tips').text('连接已经关闭');+ W- L: ~3 C9 W& h. b1 N9 A
}
- y( f! |# m: B# B
});
7 K- l# A5 B0 H% G: h
: _6 c; S8 r7 w ^4 A/ t
});6 o: H z& x( L/ m; q1 p
</script>
- q1 g" k* H+ g! t7 W
</head>
& V, k( ?) }, L& g! M0 Y* }' f0 X
<body>
( ]: g# V# X' r9 ]( w+ i
<div>
/ ]; a% @, W! \) p7 Q8 T
<input id="user" type="text" />
) h' v2 V& }: f
<input id="conn" type="button" value="连接" />; s- s9 \1 ^ b' N- n
<input id="close" type="button" value="关闭"/><br />
1 i. t# ]2 k7 U; j ?6 o
<span id="tips"></span>, s- o- y X) B
<input id="content" type="text" />3 _+ ? H# ?1 N j5 `) g# i5 F
<input id="send" type="button" value="发送"/><br />, M" x$ v' }1 g3 q: `! o
<input id="to" type="text" />目的用户' q( ~, Z; [5 x/ @ |% y
<div id="msg"> m6 w$ q, l! @3 c8 X* q/ f: J% Z
</div>" c/ J% x [5 c% W' C9 w, Y1 m
</div> U* \0 s' |3 [. @% b2 r2 Z& [2 I h
</body>% A$ i: ^/ t5 ^, u5 h1 a; D. } b3 q
</html>

复制代码

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

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

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

帐号		自动登录	找回密码
密码			立即注册

[html5] 在IIS上搭建WebSocket服务器（三）