在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>
! I" ^( H+ r! V% C
<html xmlns="http://www.w3.org/1999/xhtml">7 c: a$ M& g6 m. |7 X6 M6 J
<head>0 e4 _( t6 L7 ^; N
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>- H4 q, a2 \5 t* t+ w
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
( e5 n2 @4 v' h2 V) o7 U
<title></title>
5 q/ u1 r) E/ }- d6 M' X: \
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
" G8 z; _+ F- a1 N/ V4 L
<script>1 C3 }" e/ C- }1 g) ~) \# }: P
var ws;
$().ready(function () {
1 B( F: `: C f5 g4 Z0 z
$('#conn').click(function () {9 [1 r* R+ |9 ? A. B) R; u
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());, y- i# S& R! Y8 z# x
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
$ l1 a/ b. |+ z2 r3 J
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
7 A7 l, Q7 n& f# y: |" ]" y
//var host = "ws://192.168.85.128:8085/api/WSChat";
) d* V( b; `! ?/ L/ R" ^0 |+ L1 `
//webSocket = new WebSocket(host);
. X: J/ c1 D/ |! Z- B- s
% r& j( H0 y6 P: `
$('#msg').append('<p>正在连接</p>');
6 c- i* n- z6 C" ?2 ]- ^
/ W6 u7 e% f! ?+ O4 c
ws.onopen = function () {! X7 a8 U2 F( W1 ~& d. t, n2 Q f
$('#msg').append('<p>已经连接</p>');) m5 [+ t9 R8 `& T! g& \/ k
}
( n- F, { m. O8 A
ws.onmessage = function (evt) {
' h. z9 Z$ E+ ~7 s" g5 B+ Q" s
$('#msg').append('<p>' + evt.data + '</p>');1 K) ]6 T) {6 E& S- `. d$ D/ c0 r
}4 k5 l' K! j& C1 _9 ?% D
ws.onerror = function (evt) {8 v# D1 n6 Y' T+ \. W
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');8 j* }+ @7 S" a5 ?
}
3 i) A' M1 L. ~$ e9 P
ws.onclose = function () {
) ^- |6 Q, h# K7 d, ]" X- @+ ^
$('#msg').append('<p>已经关闭</p>');& A" M8 G% z, l0 u9 H% W# w
}
$ [( @2 K- q% r; k1 M( E. V
});4 U1 t q# N! }
* C6 Y& C! `/ z' H* X
$('#close').click(function () {. U; O) H# X+ s; x5 r- Z
ws.close();1 z, R# B" ^. ~
});
5 A% f4 {/ T. ?# L5 N
1 M1 p, S+ |- i" L
$('#send').click(function () {
: s4 K$ ?& V3 ^
if (ws.readyState == WebSocket.OPEN) {
/ T `. u3 N- d, C/ C: H
ws.send($("#to").val() + "|" + $('#content').val());
Y' K/ Q" F( u7 |6 |# E, R) ~2 X
}) }6 c) J$ X$ e3 m. J7 J0 C
else {" I6 S3 V3 F) h2 P. m
$('#tips').text('连接已经关闭');1 R2 t1 S4 {$ R' p: [9 i
}
$ c2 S6 n0 B7 c4 o
});
& `- l) Z" c, `; ?6 R& P
7 l# f% V; f8 q
});( D5 L1 p0 B4 `. r' z4 @8 n
</script>
, G/ ]* u" [4 l' Z0 y# b; m8 {+ K) O- r
</head>
( s$ G- b j$ E
<body>4 X3 u1 J8 X+ s8 H. f; i1 m, @8 \
<div>
1 H( S5 ?, F' I/ c5 {
<input id="user" type="text" />! f- b/ ~% t: C5 G9 O
<input id="conn" type="button" value="连接" />
- R" c. \! z' D1 b/ _( L$ \& {
<input id="close" type="button" value="关闭"/><br />! [+ E, [( y, _3 a2 ^! b
<span id="tips"></span>* |* X S7 D D8 B5 r/ w2 F8 n9 f
<input id="content" type="text" />
1 k n; _: N$ O2 O( O6 S! P
<input id="send" type="button" value="发送"/><br />8 q- L5 }6 d$ I# |1 b& J- e
<input id="to" type="text" />目的用户
2 {' n2 f4 |( r# P
<div id="msg">
* M5 `# e7 X/ D& `' M0 f
</div>
% I; b3 c$ v) O& t7 b, w
</div>
) X, s/ b; n' \/ I
</body>7 R+ O& ^* u8 g3 Q$ b
</html>

复制代码

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

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

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

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

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