在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>, g, ~. \- b: g/ M" p, D& i- I! w1 C2 I
<html xmlns="http://www.w3.org/1999/xhtml">
0 H! u- u' R2 p9 m0 t( C- r
<head>- `# U7 s3 B' ]3 X. }3 l. i
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
4 c2 D7 _9 P2 E7 C5 f- b0 h# F6 }
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
8 _& L/ C/ D5 n* I
<title></title>
) c0 X5 X3 s. [& T3 O* X2 R
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
# U' g* b7 e$ e* v! U0 }
<script>! H! Q! g6 h3 h$ B6 ?. E1 k
var ws;
$ v( L+ ^ ?/ \: J' ^9 S5 j
$().ready(function () {% v* A1 Y4 E4 z; _+ L; \
$('#conn').click(function () {4 {1 y) U3 @9 }$ U8 c; a0 G; Y
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());! N& }) N6 P+ R) ~) D9 Y
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
; P, S* g3 `$ r5 j+ S; C1 _
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();: e/ K" n7 n, Y) L
//var host = "ws://192.168.85.128:8085/api/WSChat";
7 B( `, V- p9 h9 o
//webSocket = new WebSocket(host);
6 v6 s. ]9 P. o" e, q" C4 ]1 G
0 i& G4 P& Q( R% b
$('#msg').append('<p>正在连接</p>');3 v8 z7 ?" x! H, l% U
' h, \& n0 n& k7 r$ {/ Y
ws.onopen = function () {
9 c- `8 }9 C9 n6 F0 i- K" P1 C
$('#msg').append('<p>已经连接</p>');- J U" j7 c$ d/ S% A/ `
}3 v d- @" e3 X% W
ws.onmessage = function (evt) {) d' M3 `8 m: R* o
$('#msg').append('<p>' + evt.data + '</p>');+ }5 q+ x+ {( w
}
3 G5 R6 e4 F3 r! v* q0 _
ws.onerror = function (evt) {6 X' j0 [# U6 f+ I! M# K
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');3 w: L$ a. i, g/ K) N8 Q
}1 X7 z! O2 {4 L) P: i, ?3 W
ws.onclose = function () {# {7 {! X8 [3 {0 i: r) M
$('#msg').append('<p>已经关闭</p>');
6 U0 h" E/ x" T6 |4 T, Y6 ]
}7 M% W: E$ b& I, M
});
: i t) A& B4 q1 N
) C, N- o4 X6 M7 o8 h
$('#close').click(function () { n% d4 {7 s2 X& B1 T; P$ Y! p
ws.close();
% j: a4 }$ {6 f. I
});! O. @$ U% T4 e
/ Q- D2 {3 S$ r& \: O" U
$('#send').click(function () {) m4 r9 O# a- g) O8 n! ~1 K
if (ws.readyState == WebSocket.OPEN) {4 C& A; r5 v. ]
ws.send($("#to").val() + "|" + $('#content').val());8 W; ?, h+ f8 U7 w
}
) V1 m, f. U2 \; e( N Q, `
else {8 @( w f, d7 N/ B" D& e P
$('#tips').text('连接已经关闭');2 l q) j$ }2 |# Q3 A* ~, |4 m
}
4 ^/ `% n& \' R- t- u$ O2 V0 P b
});1 T3 N( B. E1 a# f5 I
' n4 [# U6 \. a8 V: K- L, o
});
, ]8 ^2 I i' ?$ j: W6 g
</script>
# }: E/ ~8 j0 C6 v/ S2 O
</head>
0 N- b2 S* T7 ] W2 f; y
<body>9 w3 v& D; W6 d! l
<div>" c* H- F- ] K2 X. V! R
<input id="user" type="text" />* f M1 F5 a8 f& d: }+ h
<input id="conn" type="button" value="连接" />1 v0 h" d0 G% L% a
<input id="close" type="button" value="关闭"/><br /> Y4 e: k9 g/ c* j& i# N& Q! I
<span id="tips"></span>! }0 P( u) h. \: g, \5 H' l
<input id="content" type="text" />
) A$ x, @$ _" t5 I1 i
<input id="send" type="button" value="发送"/><br />
/ i' U( A* W7 ~
<input id="to" type="text" />目的用户
- X* V/ a9 ?- U
<div id="msg">- p; |' n5 E. v E6 T
</div>% N9 g9 v5 R& W6 G% c/ G" t
</div>
& _6 W+ Q. O# I
</body>
& o2 `. m0 }/ V: f, o. x& K
</html>

复制代码

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

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

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

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

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