在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>) h( q" I2 ~( B9 _' `
<html xmlns="http://www.w3.org/1999/xhtml">( }0 Q0 d# o- D5 k
<head>
6 l7 M5 W- B: t' x- [$ k" J
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
: ?5 f* P, p$ v
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>- O D' T2 ^+ H; a* e
<title></title>
- k) Q" r/ H' ]
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
# w4 L/ l4 i6 |. ^ {/ h$ W) m
<script>
8 o) ~5 i4 e3 S" I& v* k
var ws;
( l' _- Z" k! I) v1 _+ m1 C( m4 d8 i
$().ready(function () {
8 s2 t C& c8 Q+ G( A
$('#conn').click(function () {
# W% L9 Q2 h- p% j# }
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());) N" i( `! R" |* m& Z
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
9 j( d7 H. B2 H; R
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();! X9 r8 B9 U+ {7 e; {) i2 F
//var host = "ws://192.168.85.128:8085/api/WSChat";
8 t; Q: \3 g4 F% `7 J( i. x5 Y
//webSocket = new WebSocket(host);
. @) u6 |/ r- u" k' M7 O
; I: K, d; M6 E, c
$('#msg').append('<p>正在连接</p>');
8 b, y. O9 [2 S, B
* z1 R4 K" e% k. K" d) `! D& H
ws.onopen = function () {
: y' F1 ]% \/ U- P' n
$('#msg').append('<p>已经连接</p>');6 q3 ^0 b$ ^ N" J5 r& H3 |6 f
}( ~$ }5 m/ ~- k9 K! f
ws.onmessage = function (evt) {8 Q3 F( v% b x" d
$('#msg').append('<p>' + evt.data + '</p>');
' t! t+ S! ~4 }2 N2 @ @3 D
}
. `' T A- P, Y5 H/ j
ws.onerror = function (evt) {+ B: ~, z8 `& p4 l. h) ~- K4 q" I" s
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');3 G5 n4 K+ Y9 W5 x4 P( m
}
6 c6 X- N$ v+ v6 P! y: E
ws.onclose = function () {
, K+ p) |( f( t* a
$('#msg').append('<p>已经关闭</p>');
9 c! G; H2 U6 ?. N5 A6 {
}3 \9 o; ]0 u! i& J
});1 l- T( S a7 {) [
% Z9 C2 \: `, t2 S
$('#close').click(function () {
& H$ Q- }5 p$ X- o
ws.close();9 z3 f" ~* H* x* P; u
});
" T Y2 t6 _! {, g' S/ E& o
1 q) h2 P4 P2 E
$('#send').click(function () {
6 ~2 l5 Z0 L% b: e/ v8 ~! T
if (ws.readyState == WebSocket.OPEN) {) r0 t* N7 P" g6 @
ws.send($("#to").val() + "|" + $('#content').val());
2 b; ?- t; v. L8 H* h, @/ G5 l8 v
}+ G1 w- r2 q. [ h4 c
else {$ e6 Z6 Q, V) t6 ~: [
$('#tips').text('连接已经关闭');4 K+ r. |0 G: ~$ ^) f# y5 E
}! f) z- ^) a* J9 I
});7 t! h' D* w! J
2 x* L3 X1 t$ Q6 m
});
2 F3 ?" {- v2 p) T$ N. ]
</script>
! o) X$ n6 a$ q: r
</head>" _% z6 ]3 s; g* F% f$ Z9 w
<body>- ^! h$ n0 v% V3 Z
<div>. r/ p, {" p3 T! b( f
<input id="user" type="text" />
2 `# B' I1 c5 C$ ^
<input id="conn" type="button" value="连接" />5 S+ f4 A' t+ L
<input id="close" type="button" value="关闭"/><br />1 B9 A5 n- a; w) j5 g+ C
<span id="tips"></span>
8 |& v/ v; J7 p* g9 X
<input id="content" type="text" />
: E" l: e" F$ z7 [5 U/ r1 x$ x4 ]
<input id="send" type="button" value="发送"/><br />! E% d3 E; N8 \
<input id="to" type="text" />目的用户
& ]. [% O8 ?/ t3 g4 D
<div id="msg">
) W# T1 P( ]. n5 q6 l
</div>3 Y6 j3 c- G- X2 v
</div>; [2 i1 f( Z/ I6 [9 I7 C
</body>% \: b' m3 H) ?4 k; g, X
</html>

复制代码

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

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

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

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

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