在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>4 z- Y; T' J2 p8 l$ S, { s5 p) x0 S
<html xmlns="http://www.w3.org/1999/xhtml">
3 ^* M1 b/ V/ S; Y' l) v1 {
<head>
- R8 R: c4 {- j6 ~9 R+ G9 p1 `
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>. P) E) N4 J& u1 }3 D
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>$ J- u1 V& V M9 o# S" a
<title></title>
0 v. L/ P5 E5 t( v7 s- u8 n
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>' W$ F7 F7 _# i6 U3 b
<script>+ R5 w/ l5 v% R- ~7 d7 X- g; ~* R6 _
var ws;
8 i0 ^+ q: q, y3 x
$().ready(function () {
/ Z9 L) A M( z7 i, r6 P: S$ `
$('#conn').click(function () {% [% J4 E0 e$ q. D5 i
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
1 t* D) p7 f' V9 J$ Z
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());, @& ?5 m j+ q
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
, e% z% U4 ^) m3 r+ q
//var host = "ws://192.168.85.128:8085/api/WSChat";
1 p9 |* @% l, D/ ~0 a/ \: K
//webSocket = new WebSocket(host);
X8 Y& z- g/ V5 M8 Y1 k
/ z7 R9 i4 f; H8 {) T& g0 l8 g1 U
$('#msg').append('<p>正在连接</p>');$ Z3 r, ^% F7 _8 |9 ?. X
& j# K) t0 H# i4 U% |
ws.onopen = function () {- Z. j% |+ M! n: A' O& {3 ?1 U: T
$('#msg').append('<p>已经连接</p>');7 _" y6 c7 G5 G2 C9 L- ]! a
}
% d) F" W9 x0 V
ws.onmessage = function (evt) {
5 M+ o; n( J, K4 F! E1 L( a* f
$('#msg').append('<p>' + evt.data + '</p>');( |5 g- p2 o. X! N4 ]
}
8 p$ D7 u) i+ G- m- e
ws.onerror = function (evt) {: N" i. R; |3 x" e8 a0 s" ^2 v5 W4 v
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');( Y5 d/ p2 @4 z* j# g0 O1 u
}
. v* G. } P, n* U9 d. y
ws.onclose = function () {) a$ v5 X5 `* T( j& r/ u% A/ o
$('#msg').append('<p>已经关闭</p>');
2 A% u5 S' R' [
}2 g$ K1 a8 @5 f9 e+ ^6 ^# t
});
! ?- C* e( u' r2 L9 s8 i! b$ _
0 Q) b$ M3 @" L. m: n( D: h/ d( b
$('#close').click(function () {. ]: N7 i& b4 G5 ]0 z, g& F
ws.close();6 {( g4 _( g! [% x
});
; Q. d0 m6 J' m
" j+ m2 M% u* W/ u0 C- R! _
$('#send').click(function () {
7 o3 x& @* Q0 t. k% U3 y
if (ws.readyState == WebSocket.OPEN) {6 M, q4 K5 a; b" n+ Q* a
ws.send($("#to").val() + "|" + $('#content').val());
" ^5 \! s6 ^+ A( S4 p u4 p$ t+ u
}, D! E5 \9 ^$ R9 @4 J$ `
else {/ Q" w$ r( z( e0 n
$('#tips').text('连接已经关闭');" Z& W3 u1 G" @1 S0 ]$ Y
}
- b& v4 G# ~0 C
});
) m0 M/ u9 z9 ]7 s5 D1 n
" L. D# u7 x; y/ e# g% |5 R5 v0 Y
});
0 ?+ G+ g0 U, q( @, V" d
</script>
9 k. n9 y) Q6 I7 s6 M' J
</head>; U/ n3 G! ?5 W9 f! k
<body>& U1 A+ W6 |& U' H5 e& ]7 _9 K
<div>0 U- f* H1 |4 r4 S
<input id="user" type="text" />9 w4 W* [7 h0 p
<input id="conn" type="button" value="连接" />
8 H* k. `" x* [$ v& ]
<input id="close" type="button" value="关闭"/><br />. B5 @1 D1 q1 q z7 t6 T( l
<span id="tips"></span>
) }5 f, q- ]6 i9 g" P
<input id="content" type="text" />4 S* w- U) k# X" N2 n4 j( ~
<input id="send" type="button" value="发送"/><br />' ~; H8 ~: c5 n/ C/ \2 b# W
<input id="to" type="text" />目的用户
- }* U g& k8 }. \6 ^+ V4 q0 _% i
<div id="msg">7 f# B9 c" w2 f# G( Q" a* Y
</div>3 n2 i% V1 V. N! \ x
</div>) |1 g/ X; H2 l' d; K( Z) A
</body>+ |* D2 t) y7 T f
</html>

复制代码

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

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

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

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

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

浏览过的版块