在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>8 C( d4 Y( f2 V* S' X
<html xmlns="http://www.w3.org/1999/xhtml">+ ?# B, o+ L3 d( T7 D
<head>" O' x6 { W0 o: \( P5 _
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>3 Z/ f$ |, L; h0 {' Q' O" d
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
2 O! f, y( e8 e- L P
<title></title>" J- N, o8 E; [# b2 ]- e
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>- \5 f0 M ~- s+ S/ @( Z9 Y9 K
<script>
. v9 X# q, x) S
var ws;) p* J& ]5 C( w
$().ready(function () {* }; F: N2 z5 d2 H% X
$('#conn').click(function () {& z7 E$ u5 G" t4 N, W1 d! } U
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
" A0 G3 J& V4 v* \( ?) ^
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
" {7 G9 A- y+ e8 |7 e: q
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();) Y3 L2 Y& `' x2 }
//var host = "ws://192.168.85.128:8085/api/WSChat";
8 p6 N' O3 D( l# x' f3 i
//webSocket = new WebSocket(host);
* Z8 D4 [, P+ b1 c8 H
! e5 G' w# ^8 q- ?! s. e2 z
$('#msg').append('<p>正在连接</p>');
- m+ N( r; k9 K; W2 s& O" u
% U& \( o2 H" z3 }, _0 L8 n# V$ A
ws.onopen = function () {% x3 v+ j& P: ?* I
$('#msg').append('<p>已经连接</p>');& i+ G( R& Q' t' v4 W" e: z0 m
}
1 L, {0 Q9 p0 H( d
ws.onmessage = function (evt) {5 o( Y" q8 c2 O0 ]" G
$('#msg').append('<p>' + evt.data + '</p>');+ [/ ^! d+ o5 Z5 d1 n9 @5 m2 {
}& b0 p s* }" i$ K$ _
ws.onerror = function (evt) {7 i' f' a' A* e3 G5 P1 }# J
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
: y/ \& v2 V4 j; v/ N6 W! L q
}
7 Y7 b* L, q5 z5 H
ws.onclose = function () {
# Y v/ ]7 U( F4 x# ?% u
$('#msg').append('<p>已经关闭</p>'); G# r/ E* F2 U* {$ z, z( h
}
& c2 _( {7 M( A) D4 i0 T
});- l1 h& \0 S. ?; m
% {% [% ` i+ D6 ~+ h
$('#close').click(function () {
) e" X- `' @. ?9 F3 n R9 j! z6 Q
ws.close();
, T3 M \/ |: q( X) U1 U& `* b
});
/ P4 _! _* x) ~: n
1 z O8 F7 j/ i$ N7 i3 Q! \4 _8 L
$('#send').click(function () {: ]1 }' e) [. I8 v9 }0 w
if (ws.readyState == WebSocket.OPEN) {
6 k2 e) l0 \, d; f6 e
ws.send($("#to").val() + "|" + $('#content').val());5 \# n; z( A. A9 |
}
" T' \* h/ f7 \8 r. a
else {2 c U1 p6 I& u5 c
$('#tips').text('连接已经关闭');
( B* H" {( }3 B) X8 C
}
5 D4 M$ [6 W9 K9 w N
});
* G, u+ L& v( T7 ^
) W5 k) N, X+ t/ B/ n
});
+ @: x+ [- l* W0 ?8 W+ E
</script>
- m. H* t: ?" @4 V/ l
</head>
3 L( P6 g h% l+ C6 z) ~3 k/ f
<body>8 }2 w9 g; D( K+ T" N) [
<div>5 A. J7 @# k: i# C
<input id="user" type="text" />
/ l2 _5 L/ }7 f, ]2 X! c* M
<input id="conn" type="button" value="连接" />
/ e1 W2 n) p1 W- |
<input id="close" type="button" value="关闭"/><br />
/ Y! w' m |5 [+ u( P, o
<span id="tips"></span>
: O4 s. r& q' c4 ?: F7 `9 F; a" L
<input id="content" type="text" />
2 f, e4 I+ g |* K
<input id="send" type="button" value="发送"/><br /># }( `% W" U1 A, J6 C/ Z- O6 P- G9 `
<input id="to" type="text" />目的用户
" [6 G; T- f: d( B. k/ B
<div id="msg">
: z/ x/ C0 I9 l9 A' |7 `. J+ S
</div>
3 ?* h& x) P" X' f) d+ r0 [% F0 c; y
</div> K! t6 n% n. j6 l( h
</body>
* e& ^8 k2 `6 G4 r& F
</html>

复制代码

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

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

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

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

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