在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>+ N$ V0 j$ c0 [- r1 E2 M
<html xmlns="http://www.w3.org/1999/xhtml"> l9 s6 L! ]4 I' q: \4 S% W2 z* u
<head>
% i1 J- H8 f: O- I* p
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
* H4 C! E. Q9 X
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
# n1 e1 \) V7 l' b' [
<title></title>/ ]) x! H. Z6 A B% x- y- |
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
' h" n. X' J+ N
<script>
/ o# Q( `! v6 F! U0 k3 O
var ws;: w2 p& V- Q( B
$().ready(function () {
8 `8 T! @. ^6 I' k2 y. J
$('#conn').click(function () {# K1 s9 o7 O5 m v2 n
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
" [& Y% e. D* a
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());% g0 W- E$ i+ J9 L( t& }
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
3 M c5 }2 W. A# C3 ^$ L' s) k
//var host = "ws://192.168.85.128:8085/api/WSChat";
' N3 ]& Q* y3 |5 V$ A
//webSocket = new WebSocket(host);
# T8 H3 Q( t3 |3 _0 K5 W! }
- t* B* Z8 y" O1 x* |+ ~$ y
$('#msg').append('<p>正在连接</p>');
) G9 C( I3 q: Q( x" _* V6 G5 m0 \
) P- b% o5 c% G' c, E0 a: s
ws.onopen = function () {
( j9 n! i+ ^9 s' @- h" o' i$ ^
$('#msg').append('<p>已经连接</p>');* U q+ p% o( h3 F+ x- }( E
}, T) n# r* |6 E7 M \5 d8 t
ws.onmessage = function (evt) {* T* T1 i7 C5 ]
$('#msg').append('<p>' + evt.data + '</p>');" Z! F" g8 A# Q j! L8 c
}. X; u( _( T" k" c8 Z: z
ws.onerror = function (evt) {
! I- Z6 Y1 U& P
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
, F) f0 b4 z M% R* v N
}
+ u+ g5 y7 T I6 x* v& w
ws.onclose = function () {
. v5 o: M+ x' Q) I, U: Q) ^
$('#msg').append('<p>已经关闭</p>');! O4 S; h7 p4 j. p' J( S' q
}+ G7 V. F/ k) S( c8 u A/ G. [
});2 H6 `. t( |4 k, f: f
6 m4 _$ \* b6 k( N' s5 b# y
$('#close').click(function () {! u% u4 u# T1 D( x
ws.close();/ K/ l# B4 v! c9 _; H# C X8 N, q" v
});+ L/ t3 i* m s6 u$ ?+ |, ^
, F, y' d. g# Q5 A5 m" N$ D
$('#send').click(function () {1 z) o2 @# T& a+ T' }
if (ws.readyState == WebSocket.OPEN) {8 R* i \+ u' q( N S$ ^
ws.send($("#to").val() + "|" + $('#content').val());
% ?+ L" P% u. o7 y+ U
} ~/ X! b* L5 L8 ^ z6 i8 Y' S
else {; M5 H( d+ ]( P) K; ?& K
$('#tips').text('连接已经关闭');9 Y S% ]/ h! |2 O( r6 j% H6 D7 k0 o. r
}9 {/ [' K7 H9 D$ m# d9 i+ ^% G
});6 w( d% a( K' W7 B d; o Z8 M
$ A3 k5 E9 C" ^9 o7 V+ E- p
});9 i' V0 }' T J; Z
</script>
' c, }2 {; }7 s4 f( u1 \, C8 n
</head>
/ M9 S9 y# o: u8 ?
<body>5 I3 K8 [, q3 }8 W; }; a0 i
<div>8 S* l; E$ F5 X9 l4 q$ ~
<input id="user" type="text" />
4 a0 D0 @. }9 b, k! {1 |
<input id="conn" type="button" value="连接" />
3 K$ ?; |8 u3 n g5 x
<input id="close" type="button" value="关闭"/><br />
, M$ r) E* z% y, E0 s }- Z
<span id="tips"></span>) I" x" Z9 T4 L* u+ X
<input id="content" type="text" />
! _& s }9 X; E4 n' o0 o
<input id="send" type="button" value="发送"/><br />6 X# z1 `7 s- m# c3 s4 a$ P& M
<input id="to" type="text" />目的用户
" B& `1 X% @$ w, N9 g
<div id="msg">3 G5 \& T A3 d! b E
</div>, J- V! Y$ a! T( _% {- T
</div>( S& ^* r& M( E
</body>' R# g( F9 U' k) [$ A7 \9 R
</html>

复制代码

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

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

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

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

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

浏览过的版块