在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>% C) h. E9 _! J: a/ Q
<html xmlns="http://www.w3.org/1999/xhtml">
3 O+ ]1 @ B9 n* r) a, ^
<head>4 V" l# u2 W5 |/ r5 L3 i
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>" U) i, ]7 K, p8 H% Y# o) X
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>" l" C F0 j# k3 J7 ?, x8 g
<title></title>! {9 y; m+ F& @" n' @4 @ i" Y
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
9 S/ |- u1 g* o
<script>, ^1 {/ N$ O7 V9 l% X
var ws;
1 Y5 G4 Q, j* K4 ^* e; P: U( Z' _
$().ready(function () {& V: P/ i8 g2 s; Y; t
$('#conn').click(function () {
' k6 q7 \- l4 a1 d# r$ T
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
" c2 H4 ~8 k1 `, z4 w& K" r
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());% x5 k8 i5 v$ W. I
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
" P: ~; G; u/ i7 n. ?5 a
//var host = "ws://192.168.85.128:8085/api/WSChat";
% o/ x/ ~# P( v+ j
//webSocket = new WebSocket(host);6 N, s2 i* I( S" l$ o0 z0 ~( B
4 v, `! u6 o/ }
$('#msg').append('<p>正在连接</p>');
; O9 J8 |$ q8 `3 A* `
8 F& m9 o1 D: T5 y7 I% m9 Z0 I
ws.onopen = function () {
]; P+ ]2 C0 t. W. X9 O3 F: }
$('#msg').append('<p>已经连接</p>');
5 I" F; a" e2 W
}# ~3 W9 W+ j# B8 @
ws.onmessage = function (evt) {5 u& `1 A* e" U7 u! o$ p; V4 m- I
$('#msg').append('<p>' + evt.data + '</p>');# l+ G( }# @; y
}" Y: _8 l3 t; u. _$ N' G0 I& ^4 o
ws.onerror = function (evt) {+ x2 S* \1 z+ Q: G( l- o
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>'); a+ j+ k- Q% e+ l
}( f( N% \% \* I- j
ws.onclose = function () {
0 M' {% y& V/ w$ m4 ^" B
$('#msg').append('<p>已经关闭</p>');
: j4 ?/ r7 y; Y! R' a: j, E
}
8 `" B& Y1 R& m: R
});
; U. Q1 n8 E. L. ^3 o
0 J' ?/ @+ {; M) b ?, B! z
$('#close').click(function () {3 A9 G+ f. ?! g" i& k* @' x# U% J
ws.close();5 z- a5 |8 G+ t3 R5 O& ^, _$ l2 E8 m
});& X9 p$ G: t4 M: P! e: x
( z K& A2 u4 X) r; g) j
$('#send').click(function () {, P2 n% T0 _( l! y
if (ws.readyState == WebSocket.OPEN) {
1 ~- U t, a) o! z9 j% ]- q/ Z
ws.send($("#to").val() + "|" + $('#content').val());
- d6 L: c8 [: M; F7 |/ N
}* G& q% p) V$ x1 h1 R
else {
) Q& N( _5 x t- o2 e; s
$('#tips').text('连接已经关闭');2 y( {% ~) d" a/ ]
}* `) Z& v& ?9 z5 m% Z# l
});
# Y* l7 I- I$ Z: ^, q
7 j& U4 F2 U' w
});
- h. R. d! c$ V6 j; \6 x" t
</script>
, _0 }; W" @& A% ?
</head>
5 Y+ Y: q/ L/ @& g" M3 Y
<body>. V( E0 S I9 b$ O
<div>
n% C$ M! ^) H, H/ ~$ M0 F
<input id="user" type="text" />& b; D. l) e0 T h
<input id="conn" type="button" value="连接" />
$ }! m* ?1 m/ W* s& p$ w, H& ]5 `
<input id="close" type="button" value="关闭"/><br />
- r4 ]9 m8 I- J
<span id="tips"></span>$ G- J" [ ?# t# I5 j
<input id="content" type="text" />
' H' \, l. u. V" k5 [. g3 a
<input id="send" type="button" value="发送"/><br />0 y, c: w3 ~) \* g/ J1 C, B6 B
<input id="to" type="text" />目的用户
) } H5 C+ @7 o1 w9 b3 [
<div id="msg">9 T! f2 G) Z4 ?/ L
</div># [- q: G" d0 P& S
</div>
3 u$ t E* \, x; J) D
</body>
</html>

复制代码

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

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

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

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

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