在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>
! j. A l5 i1 |; S& }
<html xmlns="http://www.w3.org/1999/xhtml">3 l% J y( d% H( u* Y
<head>6 l! z6 k7 N4 H* q4 x) @, P7 b) e
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>4 p5 X6 A: ]! R- S2 O: r
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>8 j6 C ]4 M r
<title></title>
1 ]. i# ] Y- N8 g( e$ S
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
6 M G/ e. m4 x7 h2 B2 T+ }" f: o8 h
<script>
& m" t# B' u* O) F- b
var ws;- R& D. W4 R. U* G" q/ \/ g
$().ready(function () {
8 K: k& r- `: d2 ]; R
$('#conn').click(function () {) T$ X# |2 I4 {) s! P
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
) T2 k% o+ W3 x3 `6 H3 G" m
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());$ s9 c( h2 B1 x0 g& T% ~0 }1 \
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
7 v# N/ r! k* }9 f* D- B1 p3 F
//var host = "ws://192.168.85.128:8085/api/WSChat";
. b% a) ~, ^8 q& w
//webSocket = new WebSocket(host);) c) k! }3 |+ l1 @
2 v( F1 ?7 z) e- Q t% M! u0 V) h
$('#msg').append('<p>正在连接</p>');
5 l- _6 [, S9 v* Q$ R5 q. q% a
) j! p, z+ K/ d3 E7 f
ws.onopen = function () {
( }! k1 \5 W* ]8 X- E6 |
$('#msg').append('<p>已经连接</p>');- q/ d" P9 ~; Q$ D7 b
}0 f9 G2 [4 t- U/ s
ws.onmessage = function (evt) {: D8 j4 X" q0 \& T, P1 K: H
$('#msg').append('<p>' + evt.data + '</p>');' G& K& h% e4 `5 D& W* K
}. p: ]9 U- s' c
ws.onerror = function (evt) {
/ }$ J* A2 ^, L9 u5 p) n4 O+ Z. w
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');, M# h: g# B3 J; z
}" \+ f) H$ N+ h; P/ P- p) t
ws.onclose = function () {
) D, y8 r, O5 E4 K: V5 b
$('#msg').append('<p>已经关闭</p>');' e% D9 f0 P: ~# T
}( e+ P3 n" W) r" M- K# x
});* j9 M* u# ]0 U; ?
5 Y+ n+ _( T7 C5 h
$('#close').click(function () {* b% s7 Y: u6 N8 G+ a$ ^
ws.close();
. m, U, E; o, Z
});
. U1 m- o% K8 g, Q( `
3 r F4 }6 x) j9 ]! }. o/ W# D* C
$('#send').click(function () {3 {( E2 d& W" d9 t/ D- X
if (ws.readyState == WebSocket.OPEN) {* z! H1 C# _5 r# f6 g
ws.send($("#to").val() + "|" + $('#content').val());
& t* C0 h2 F- v- _0 c
}, A% E8 @2 {" D! M, ]
else {! H! j/ _7 K1 Y$ |
$('#tips').text('连接已经关闭');7 H; F8 b1 e0 c$ u9 X F
}0 j7 k9 m/ D# A X: p7 N
});2 a4 {$ B- h* ?) X5 U' r F
: W# y% @" a: F8 o; M+ e2 i
});0 A2 G# m( O) z
</script>
2 O: u P# H6 J6 s
</head># F0 H$ }# t: b8 d% z/ n
<body>, {- m( ?3 B2 }9 o: Z
<div>
$ }3 i/ X' D- v G
<input id="user" type="text" />8 v7 _- t( V2 G% V5 q$ _) ?
<input id="conn" type="button" value="连接" />
$ }! l$ S' c F B& H
<input id="close" type="button" value="关闭"/><br />
- g7 X2 S, ~5 T2 [; `5 y
<span id="tips"></span>9 x2 T! ]5 p7 t! ~2 ^! ^/ m
<input id="content" type="text" />
9 ]) c* P! v* A6 v7 w, i
<input id="send" type="button" value="发送"/><br />- N# h! i$ }1 K/ j
<input id="to" type="text" />目的用户
0 u4 ~3 H: x% a- x
<div id="msg">
+ Q/ R& R8 u5 P! l P" U& @- L
</div>2 \' @4 F( y' X$ R3 ~6 G" U
</div>- \* l( C4 _7 L
</body>+ q5 u R! e! _, f
</html>

复制代码

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

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

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

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

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