在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>
) V+ \ M8 k/ I
<html xmlns="http://www.w3.org/1999/xhtml">
5 B+ U( o4 j; p
<head>, f+ b! ]* V1 G4 L
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
% b! W: Q; {6 c5 P/ N2 s
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>4 [7 e2 x9 N1 Q$ E0 _) v/ n4 @
<title></title>7 @3 Q- ]! T$ [- B" L" s
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>; F2 g3 g7 _* \9 Z8 n
<script>
) |+ a9 w8 v1 [0 |2 T; B
var ws;1 {" Y7 e) }1 Z- h
$().ready(function () {! h+ j( u" C) ~) ^4 r. v
$('#conn').click(function () {
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());( U" T2 @4 ?$ T3 R# u" {* M* a9 V* S
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
1 }$ H2 K# [- W+ j7 t
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
, Q# \: w! W0 m6 ?6 Y) j6 D3 S
//var host = "ws://192.168.85.128:8085/api/WSChat";
& r4 @: i: m" F
//webSocket = new WebSocket(host);$ ?0 @# I% k+ J* x6 [5 n
Z( j' J- `6 P! b+ t3 Q
$('#msg').append('<p>正在连接</p>');) X7 P1 U# o+ q! r0 b! E) C1 b
1 T( w# C# M5 q4 E' C) N# j
ws.onopen = function () {
L& t/ a; b: u
$('#msg').append('<p>已经连接</p>');
9 L; z6 o( Y9 |7 l, E+ ^' v' l3 ~* C
}: m( U% f$ v2 |, z1 m
ws.onmessage = function (evt) {
; F) Z( `4 B, P0 V" B
$('#msg').append('<p>' + evt.data + '</p>');6 s; G8 r6 p$ h( t" X z, N& e3 C# V
}
+ I0 @! h% f- Y. E7 ~$ S1 ~
ws.onerror = function (evt) {
3 ^" f- k: q# J U
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>'); `8 Z- V& n& m
}/ n" N1 e. U, Q; [. ?
ws.onclose = function () {% f9 y( H; D# Z( P
$('#msg').append('<p>已经关闭</p>');% t4 g+ v( E4 t) H7 Q
}+ Q+ V+ f9 P0 l: i( a- n5 m p
});
. [- i$ v) e. V, T7 f, @1 e: w. g
X3 v0 {" G' h/ u( W
$('#close').click(function () {
6 g) P% o2 x3 K/ l
ws.close();) }' C6 Q# F8 w1 n! R' m, X7 G
});& @9 z2 O ^4 v. ~' m. U4 n/ W
& l: S" ]& e( s2 E
$('#send').click(function () {7 [: n: Y: F4 A4 }
if (ws.readyState == WebSocket.OPEN) {
" I; j2 M/ Z: T6 @9 [ g
ws.send($("#to").val() + "|" + $('#content').val());" s9 m2 Z* T* C/ m% B7 B5 f+ s U9 W
}
* L$ O: a$ ^( A
else {
4 B2 c5 X8 h/ s6 y9 ?# p* t
$('#tips').text('连接已经关闭');
% `- Y8 k& j$ f+ A" T% E. U
}
, H+ R) Z+ [* X' n8 C
});
5 [: y& p5 f& U/ N. V( b
9 Y5 f6 \! d' G- l v
});
0 h* T- J1 R* v$ L5 g
</script>
) n2 s5 K* B$ d v. ^3 s
</head>
. f7 G | p$ M$ [: r. u
<body>
9 h6 T! S& }. D( \9 Y) v
<div>
0 ^" c2 u& a6 l4 V9 z; J
<input id="user" type="text" />! I# p H+ V# v& J/ j) V
<input id="conn" type="button" value="连接" />7 [# @( k: J7 u4 C8 p5 u
<input id="close" type="button" value="关闭"/><br />3 d0 L9 u7 Z! \0 u. E
<span id="tips"></span>
* r# z- l; G! m N# W: ^
<input id="content" type="text" />1 H* A3 W! Z& z6 Z& I3 x
<input id="send" type="button" value="发送"/><br />9 c. [: F4 R$ z
<input id="to" type="text" />目的用户
: a, p8 P- B" S
<div id="msg">5 }) ?2 f, I; y+ B
</div>6 w' F+ t6 X& X6 x9 }, J3 K
</div>
: l+ g5 V, H5 k% E
</body>
2 U2 q1 l4 V. e
</html>

复制代码

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

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

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

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

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