在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># a! ~5 Z E8 u' H( K9 H% U
<html xmlns="http://www.w3.org/1999/xhtml">
9 [ T9 V. y' W9 G
<head>8 u1 s/ y3 h* q
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
; @5 \, a. L+ O# C
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>8 m! ?$ R, ?/ ^% H+ D
<title></title>
; u, W8 E8 a L d, ~- U
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
4 J$ c% ]3 M3 U" o
<script> e N6 w% v4 A9 b4 B0 s! _" q
var ws;$ d$ e) H) b- d! A
$().ready(function () {
% B. I7 r4 N, I3 F7 _1 S
$('#conn').click(function () {
" A$ D8 ~' U8 E' y8 Y, j W
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());, p0 [6 I& e0 s6 K! h( e
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());7 k0 w, p3 L( a1 k4 z- l) }
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
$ Q: k9 T( S6 k! e
//var host = "ws://192.168.85.128:8085/api/WSChat";
. e' R+ B0 P& y/ ^- R6 ?
//webSocket = new WebSocket(host);
5 y' `: |/ L) @2 Z$ d' H
! E4 @* \! {0 Q P0 k: W
$('#msg').append('<p>正在连接</p>');
3 Y3 y* m) |$ L' H, c1 L: ?! q. F
$ k: n5 @# J( J' M# q" R& `
ws.onopen = function () {0 Y4 h0 T4 g. C5 t6 h; u
$('#msg').append('<p>已经连接</p>');! ?4 `# m! a( s
}
- [9 {7 O1 I1 m( Q6 p# Z, a9 b* s
ws.onmessage = function (evt) {" f4 I+ h' g: C% M2 F$ { H
$('#msg').append('<p>' + evt.data + '</p>');0 _& h3 ?& \& m5 J8 b' q; h7 a
}7 j# }# S6 z" P; {" _" ~/ c
ws.onerror = function (evt) {! E7 @' e b6 p8 z; n
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');0 n# Y5 h0 @) p6 h% u
}
4 Z! F+ O" I6 T; w3 t* u
ws.onclose = function () {4 o: _& R# Z2 Q
$('#msg').append('<p>已经关闭</p>');1 [# M; {4 z! y
}5 Q- R s8 O) J3 d' q1 X, n" _6 L
});
7 V$ z, H D1 D$ l2 i5 ^# ^
; h: g9 K' x" X( k% Z, w7 {7 a) d
$('#close').click(function () {
0 S. t9 { @! S, O5 Z; v! @
ws.close();
n5 z( n" J7 q; C
});5 s( R: Q8 W. I3 w5 H! E: c
6 C& g3 n8 J0 N! K6 s% L% \
$('#send').click(function () {
% `; `) L& k4 ~* |$ g( M$ @
if (ws.readyState == WebSocket.OPEN) {' |5 s" e. ]- g" L4 S! [2 h
ws.send($("#to").val() + "|" + $('#content').val());3 u; y, f6 j [# Y$ v
}, p0 D, i: L+ y( E P1 x6 E9 f
else {
; J' A0 d; [$ y0 S5 u
$('#tips').text('连接已经关闭');% j7 K# [1 W* T% @3 e1 G
}0 d8 P' o" @ [, |. n2 t
});
8 Z8 \3 B2 y+ n- F
/ t6 F5 i" D' j" N' A0 n; X. h: q
});1 }; p: d: E0 t6 i# }2 x6 o j
</script>. }- x& E0 k; K0 t$ S" W. K
</head>
' {/ q4 X2 J' {# Y; I8 R$ v
<body>
3 o) b# h. B+ c. |6 d0 d; r
<div>
3 H+ I4 `: I* g0 d8 c- h
<input id="user" type="text" />- a/ V: H" K7 h9 n
<input id="conn" type="button" value="连接" />: {* n) m X3 T: n! L8 f
<input id="close" type="button" value="关闭"/><br />2 ~/ B! _. b. u* [' t
<span id="tips"></span>
8 P4 D4 m0 }8 J8 Y% e2 j
<input id="content" type="text" />
( w. G9 c7 c: z+ L/ Z; r8 G
<input id="send" type="button" value="发送"/><br />! u! i |, C4 e) j2 {& d9 D3 L
<input id="to" type="text" />目的用户9 @( a& }4 s1 v9 t) T/ H2 }7 a
<div id="msg">
' ~7 ~) u+ B; [+ ^$ \) |6 X4 z$ A
</div>$ N; |3 |0 y, f; }
</div>$ X! L' v% C- Z- h2 v9 p6 w
</body>! L) T0 }( o! Q0 B
</html>

复制代码

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

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

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

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

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