在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>
4 t* r. }3 k) v* g+ w/ j$ b% Q
<html xmlns="http://www.w3.org/1999/xhtml">
q3 t' ]2 t! \1 F0 y2 a
<head>
- B" W" o! `" `6 a$ n
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- C/ g* Q1 A/ f7 V! K3 Z9 q
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>( j2 o7 m7 M A( m3 V3 D# A4 P
<title></title>
2 i+ p, C: O- U2 q: v+ k+ \
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>: t( \/ H& }1 U( `
<script>3 c% |' L9 i1 j/ H- ?+ I! B
var ws;9 {+ Z$ p$ G( c$ c! _
$().ready(function () {
- w3 w( [1 u5 m- [* [
$('#conn').click(function () {
( t5 W1 i. P/ h! C" P
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
% k9 a P3 G6 q1 {7 l. ~: l8 V
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
7 }7 i1 _ W6 g4 k
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();3 @3 j2 K; H& o1 b( L
//var host = "ws://192.168.85.128:8085/api/WSChat";
1 F. z& [" h$ v# T* j1 j/ [
//webSocket = new WebSocket(host);. e8 N: r1 V" N, V
; M" g' R' y$ O" Q9 x; ~1 @' i e
$('#msg').append('<p>正在连接</p>');0 m+ a4 C4 r8 H2 v& \# t3 ?
2 d) Z- D0 n% ~9 |
ws.onopen = function () {8 S" e8 l/ L: h; @1 M2 l( G
$('#msg').append('<p>已经连接</p>');
; P9 ?7 `% V4 ?
}; V& C; w! Y p5 f7 d$ F
ws.onmessage = function (evt) {
8 j7 m9 u" N' e2 R, D* e0 d8 n
$('#msg').append('<p>' + evt.data + '</p>');7 ^' V0 M7 R: F5 k5 K9 w. H: r7 ~
}+ T/ Z: o( Y; _9 H1 Y, Y- @4 @
ws.onerror = function (evt) {- z6 B3 l1 o3 |4 f) x
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
: D) V2 X) G' u# E
}
# E% q/ C' y- F# V
ws.onclose = function () {
# _4 A9 @8 _5 s
$('#msg').append('<p>已经关闭</p>');& k1 ]5 i6 s S, M, ], J
}# v. X- z9 R3 L0 |- }" b3 J
});
. d) Z; e7 {, f, O0 b1 [8 w" _
) P D2 J& K4 T
$('#close').click(function () {
( z( u# }8 U* g# Y- L% G5 l
ws.close();4 ?! b$ e! n2 ~7 R6 z8 w1 U% y
});
+ p) m7 d9 {6 C9 K
9 K' [( w2 ?! i) L
$('#send').click(function () {
6 M% J5 Q+ {& o( y5 {. F
if (ws.readyState == WebSocket.OPEN) {
4 M1 O! H: D& ]8 o
ws.send($("#to").val() + "|" + $('#content').val());/ B/ |* {2 l# T* w0 r3 o5 T3 ~( n
}
0 ^. Q, E y+ O4 Q- n7 b
else {
0 y1 j, ]6 m/ `! b
$('#tips').text('连接已经关闭');
1 l" z: b. E$ @9 |$ w
}
# |3 C! Y4 `6 n/ T: u8 V& F
});
: |& ?* x3 g6 S' l4 @+ \/ y. g
( o# ~9 r" _4 t4 A! h$ y3 N n
});
i( O1 a2 T$ L# T0 n( G
</script>$ p7 { f; f! d- r
</head>
/ w# ]8 C& N" P; f# | n
<body>6 u! i6 J6 ^: m
<div>) z, k9 Q5 K- `9 J; b
<input id="user" type="text" />" M3 R. {+ p; g5 y! e6 c/ s
<input id="conn" type="button" value="连接" />- b/ S+ @0 P2 u; F8 R6 i
<input id="close" type="button" value="关闭"/><br />
' A |8 ] E: x/ [
<span id="tips"></span>
9 j! K0 D6 |' V& S1 V
<input id="content" type="text" />
( ]; D9 h6 L; D+ t* r
<input id="send" type="button" value="发送"/><br />6 u, `4 T c. _( E1 t. o! Y; M
<input id="to" type="text" />目的用户
! H5 c( H3 C3 ~& v0 H
<div id="msg">
& b2 S; T" `7 S& M3 o; C/ B
</div>* N1 j L, i9 O8 i( q
</div>
" k' l/ a+ y) a, Z$ _3 D
</body>3 R% @ ^) H- z& b3 \! N) |
</html>

复制代码

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

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

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

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

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