在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>" W1 a( ]! j* H' y
<html xmlns="http://www.w3.org/1999/xhtml">
. X* j/ V5 F1 H7 b8 ?* X$ Y
<head>
" ~% v' i0 k+ h2 A L
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 X& l2 P- w; |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
2 i! y- |2 j3 m" ?) |' F
<title></title>- @6 a0 H( E1 H) y0 g
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>. t! N+ D" G8 i `$ V" X# f
<script>
0 M3 |, @6 Z, [8 c9 R* p, Q# y
var ws;0 Q& ^ ~1 g# i7 a
$().ready(function () {
. J9 ^# V* o7 b+ w9 o$ x7 W
$('#conn').click(function () {+ M: Y+ A" I& Y3 F8 W6 |, D9 z, E
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());/ e& ~; c8 x/ P; D' \
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
3 p8 I# B( z v
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
! P1 r) I" ]% k
//var host = "ws://192.168.85.128:8085/api/WSChat";) N, b/ w4 A5 j0 {% |9 M
//webSocket = new WebSocket(host);
/ e. t; B% D5 y- P
/ P& d' }" [- s. v/ h1 V6 c
$('#msg').append('<p>正在连接</p>');; k- S" I d; ?: `1 s M
2 P+ U& b0 T, y! W0 ~
ws.onopen = function () {
# k! L! i% v+ m9 M, ?1 ~+ R
$('#msg').append('<p>已经连接</p>');
1 ?' N2 B9 J% S# A1 Q8 F/ ~! S
}
. y" v1 m) F( r# J
ws.onmessage = function (evt) {
: y; v* P$ Y. }7 J# }
$('#msg').append('<p>' + evt.data + '</p>');
+ V8 u3 p- V6 y3 B: R
}
' C- i+ Q' r5 M3 r
ws.onerror = function (evt) {
8 c) x V/ d: D4 o4 G. t3 `
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
2 `( B8 C' L4 j* ^
}# c) X* ^4 U6 z, G
ws.onclose = function () {3 w. w4 J& p1 d; S* |# J
$('#msg').append('<p>已经关闭</p>');
' K" \8 K% J: {( R
}) ~5 U4 |( U8 ?! ?/ N+ _# ]9 V% }* ?
});
, i. B& P; p6 Y
0 ?- C! N% _9 a" Q
$('#close').click(function () {
m) u; r: d0 m2 G6 D* n
ws.close();
0 O# \& C2 w) \( |) ~
});- K6 [2 P: i; H; ?
5 l% o* Q& ]% }3 P
$('#send').click(function () {
( w. [3 U) p+ P0 k X
if (ws.readyState == WebSocket.OPEN) {( `& H6 B2 d( `4 U& J1 i
ws.send($("#to").val() + "|" + $('#content').val());0 v3 x$ Q4 ?- v) U3 {# @3 f, ]
}8 E9 R5 n& R0 Z( \
else {
0 w+ m, F2 j. S/ R* m
$('#tips').text('连接已经关闭'); A& d) I- _3 F
}8 Q7 |; Y/ Q# u6 @$ Y* M3 W+ Z
});
+ s; t: @ P0 v. M6 t
T1 W/ J# G# h4 G/ p9 y) f, L
});
( {4 G1 L q! m: n
</script>( |: s2 X1 M- q) `) `( U+ x
</head>
, u7 d; w! i! Y$ h$ Q2 t
<body>' S6 m: f. G6 l
<div>4 J& ~; N9 z9 J- g# F8 ?
<input id="user" type="text" />3 k0 P! s6 v3 ^: z$ G6 i
<input id="conn" type="button" value="连接" />6 \( Z$ ?8 b' K9 l; r
<input id="close" type="button" value="关闭"/><br />4 P' d, w- p1 t0 F. l5 N
<span id="tips"></span> C$ `: n8 G Z) ? `* ^! _
<input id="content" type="text" />
<input id="send" type="button" value="发送"/><br />* x2 g1 C# H" Q4 R% E5 G6 o
<input id="to" type="text" />目的用户
1 w ?$ Z4 T# i2 t
<div id="msg">1 o" x* a3 D( \" n' t( X
</div>
X7 N0 l+ }; \- V6 h5 \# k$ q
</div>
& G) R4 R t1 B' ?
</body>
" H5 X/ @& f! B! g9 L0 U
</html>

复制代码

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

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

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

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

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

浏览过的版块