在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>
, `9 A, s# }5 L2 \
<html xmlns="http://www.w3.org/1999/xhtml">; m7 f% t3 v# v, k% J6 x" Q
<head>
2 V8 n0 W% M7 N" l# C) W3 F" `
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
9 P: B/ R3 ~1 f$ m& m1 S
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>* e4 K% P; S# Y0 h
<title></title>: a' P* _* g9 d$ n; F) Y
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>4 C0 G( M% ^; ~
<script>
( M9 B" [8 _$ l$ Q6 L1 _/ u
var ws;6 G1 j8 e% h/ l0 d! ~( y# b8 P
$().ready(function () {
" P( \: L7 T% r$ h/ Z7 U: d: G
$('#conn').click(function () {" f9 V9 u8 ]. x z% k3 l' q
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
& O$ F+ Z' x. k/ m. P& b
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
( V/ d4 z4 E( H) X0 Y
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
5 v j: @/ i* h0 E4 j5 r9 U# c
//var host = "ws://192.168.85.128:8085/api/WSChat";
& L( T- e2 o& p' o0 E# l
//webSocket = new WebSocket(host);
8 B# F9 ]1 d/ m4 b q. F( g
$ `* @. P/ }3 C/ q# G0 H
$('#msg').append('<p>正在连接</p>');+ X) X, o/ n, L
* b' _) S0 c4 h# N u
ws.onopen = function () {! D% o( G' k3 c: D
$('#msg').append('<p>已经连接</p>');
2 e3 \3 u; s7 k* M: n) {
}3 I2 U) f y, }. e9 G5 _7 ~+ ?; d
ws.onmessage = function (evt) {
8 Y9 ?3 R1 l; w, ]
$('#msg').append('<p>' + evt.data + '</p>');0 P, P; o( d9 i7 P/ ^, J2 z% \: [
}
7 H& o4 z: M3 i3 c% @
ws.onerror = function (evt) {
6 g' h# U* K+ b+ a2 ~2 Y4 {
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');, u: I6 e$ H" z+ J
}$ {$ ~' ]$ [2 ~) e0 G1 l
ws.onclose = function () {
! M k- B4 X& ^4 b. `
$('#msg').append('<p>已经关闭</p>'); S8 h; k) x" U6 F; d3 }
}
D( O3 B2 G" e( ?) x
});
. @4 _+ T8 L& E- c2 B' r
/ m7 {, j4 X7 _4 Z' _0 k5 P% l# m, b
$('#close').click(function () {- v, K# [( T) g/ u
ws.close();
6 O" D0 x- {+ L
});
( l& F ~7 ]" U# o+ i- d
8 H" D L k& }6 ^
$('#send').click(function () {/ \8 f4 i: s; I
if (ws.readyState == WebSocket.OPEN) {
( l. C3 z& ]& S9 J3 F% ~1 s5 n N
ws.send($("#to").val() + "|" + $('#content').val());
; O1 T3 G2 S& [# V
}
u1 a+ g. O) j5 G
else {* ?3 n- y. p' [
$('#tips').text('连接已经关闭');% x. {7 J+ p) x# }
}3 h+ i2 t, `4 y3 X) N# k- \
});* J3 M# F. i- I1 V+ @
* S L$ R9 y) Y1 G
});
. b5 F/ z. P, h9 C! P" d$ G
</script>
3 P/ o5 H* N; g
</head>
/ l* L; r3 _5 N. ]
<body>
, r1 @- x1 r e0 F
<div>
! \. Y- |2 T4 I; {. i
<input id="user" type="text" />
s! v3 f t/ |! N9 C4 j
<input id="conn" type="button" value="连接" />
?1 M7 W% K7 [7 ?- e+ w& i* p
<input id="close" type="button" value="关闭"/><br />2 t8 Y, n! v2 `% ?* k/ U. a) I; n
<span id="tips"></span>
( Q: v6 ^( P, o
<input id="content" type="text" />
* d% i/ ]" \+ l2 R+ `6 `
<input id="send" type="button" value="发送"/><br />
5 {) c0 i5 @) |) g
<input id="to" type="text" />目的用户" [. ~9 N4 f6 l1 q9 j
<div id="msg">
; U; Q+ J7 H9 n, A
</div>3 z/ `, m i+ @4 ]
</div>/ G# A& P# U2 V7 n' _) s
</body>
. _5 ~# d8 X1 S6 G# d+ |) p
</html>

复制代码

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

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

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

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

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