在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>3 ^" T2 ]4 ?4 J+ f) n6 T5 P0 J, s
<html xmlns="http://www.w3.org/1999/xhtml">
6 d; w% F! z5 |% v" J0 O- V
<head>1 ?0 e: @, f. x4 D5 B k
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6 o7 A. d% [# f6 T
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
2 q6 ~$ O, X+ M# W& B
<title></title>
( u& G" }; E+ C6 ?
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>* ~5 ~; s0 L. H
<script>" N# A; i' T$ l0 d$ z
var ws;2 x2 Z* V; d# p) S5 i! N* p% b
$().ready(function () {) u5 ]# s% U3 J# N; p3 m* @
$('#conn').click(function () {( i: u: ~6 P6 L
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());% V3 w6 D2 t) e& j4 l
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
3 f7 u7 p4 a& X
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
/ Y- E0 m9 x: L/ m* L9 r. T5 X
//var host = "ws://192.168.85.128:8085/api/WSChat";( N- g- P* M% R
//webSocket = new WebSocket(host);
' K" C% t0 w" p# i6 J- h# K2 S$ n
; C5 t- W e( L0 s, d
$('#msg').append('<p>正在连接</p>');5 O6 H0 p" J6 u
& M5 j4 M: @! r/ f: U
ws.onopen = function () {+ X3 g5 o* M. a' W
$('#msg').append('<p>已经连接</p>');
* Y' x7 L; L$ N( s4 E% C4 o, C
}3 p. P4 c6 G) u b' s
ws.onmessage = function (evt) {% \, y8 {9 T3 |, ^" J- B5 A
$('#msg').append('<p>' + evt.data + '</p>');; v3 y* l% a5 ]; n- u+ ?) e& a
}0 o: s* s% Y% P0 c1 i! g
ws.onerror = function (evt) {
1 v' N- ^: w% P: N g' K5 b
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');: \ N- x1 {. b0 c% X j( a
}8 N$ q% W! l2 [* h2 O- ?4 `( d* @
ws.onclose = function () {
) X! }, t3 H4 X" O
$('#msg').append('<p>已经关闭</p>');& j9 [. J* j+ B3 g
}
. Y" C. t y3 I% S2 H0 @+ ^) |
});/ K2 H0 Q( T+ {; Y
+ i9 h/ a5 L9 P" O1 _3 l7 l
$('#close').click(function () {) o3 L5 r+ O# W% d* {3 _9 f$ a
ws.close();
$ V: O" c# O" \( Q- D' N2 a' L! i% ~4 G
});) k g5 E; x1 C: K8 \( P
" u: K6 H) `5 R- N' N1 P% }
$('#send').click(function () {
( ~3 f" L- h p6 A9 |7 g
if (ws.readyState == WebSocket.OPEN) {" [* {# z, C( H: q& b0 _! u, O8 Y
ws.send($("#to").val() + "|" + $('#content').val());
, V. b; z- T7 ~5 W$ z. N
}/ ]1 g+ `8 f: W( M
else {
2 Q1 [3 w8 Y, C+ e
$('#tips').text('连接已经关闭');6 I+ t6 P' ]0 m" B
}6 @$ ^/ c- ?; Z4 X; ?4 S( m# W
});
% X$ j* s M' E% W" W4 K" R! }
- b- @! I% u( e; F, N; T3 X
});
* N7 c7 _9 u+ M7 C2 L8 L
</script>4 c3 K. H( R" m$ L: t
</head>
' \# d5 A) }( u) D$ Y
<body>
8 U" L: ~5 b+ M e X3 _7 Q# l/ _
<div>6 o- J6 w) U4 D4 M* _8 d0 J
<input id="user" type="text" />
2 k( ?) A* J) t6 J% e% g: X
<input id="conn" type="button" value="连接" />% R3 S% p) C0 }3 t* R/ U8 L
<input id="close" type="button" value="关闭"/><br />
Q$ ]8 U# J7 }" E: M
<span id="tips"></span>% P3 C0 y7 s* g
<input id="content" type="text" />
- p+ n. C H0 H/ F/ }: V: u
<input id="send" type="button" value="发送"/><br />) ?- N5 Q5 Y3 V! Z: R! ?7 l
<input id="to" type="text" />目的用户
6 C9 I$ [4 j2 d
<div id="msg">" e+ N6 `4 d' O# P9 J1 P$ e7 ]
</div>
$ d9 l. i6 }# \* u4 X+ B
</div>
+ V$ U) V3 n) _/ a& ], G
</body>
. a4 P5 g0 p2 D0 i
</html>

复制代码

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

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

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

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

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