在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>
/ f: q m E. R$ P. [
<html xmlns="http://www.w3.org/1999/xhtml">/ n a2 v2 q/ U: X. ^& Q; _6 v8 J
<head>
- ?" P, |5 W- \! G7 R2 G
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
9 i* {! } T9 g% G( z
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>: V* m1 ?! I7 t+ o
<title></title>" g; @9 L( f% l/ P/ i7 k
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>" B* Q/ k" s9 _( f u
<script>
1 n. _6 M( j& |+ U* |
var ws;8 G7 q% _; ~2 F/ `0 r+ I/ ~ o9 }
$().ready(function () {0 \& E: s# E1 M' a% ^
$('#conn').click(function () {
- z' Q5 r% u1 P$ Z# u3 {
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());. N+ w6 E5 ~# N! T& T! A% I
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());2 S3 ~# V9 A6 p' x9 i w0 ~% n T
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
2 B. ^* ?' M/ }. l) a1 k+ n1 g4 F7 Z
//var host = "ws://192.168.85.128:8085/api/WSChat";5 a2 Z) a0 C: s9 I. e
//webSocket = new WebSocket(host);
( D# Z2 J8 D. W8 z" D
9 m. x' y" J5 [" w1 v) _4 Z9 N
$('#msg').append('<p>正在连接</p>');6 u* l0 v* T; c6 _4 _ \' F$ M
/ S$ T! X: k2 p5 I
ws.onopen = function () {; }7 V' ^4 t- ^3 _, }
$('#msg').append('<p>已经连接</p>');
! p. X( ^# u. N- l- ]2 |7 p
}
: C( E, y1 Z) d; k$ R/ r
ws.onmessage = function (evt) { Z9 n& }9 s* A
$('#msg').append('<p>' + evt.data + '</p>');
" L2 _4 Q3 U& A) {% ?
}9 F! P4 a6 P' Y# x
ws.onerror = function (evt) {5 h1 H4 L7 ?/ F
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
9 @. j8 P+ f* [8 O
}
# l( L# F. n/ b1 s
ws.onclose = function () {
6 p) N8 X, L8 R, O) g! |
$('#msg').append('<p>已经关闭</p>');
6 u2 N4 E7 T' d& r* ~8 N. x8 m+ h
}5 k) q" k4 \7 `$ x% ^
});+ d1 e8 v1 J5 }' t" |) Z5 G
2 V8 E1 b$ ^0 P6 M
$('#close').click(function () {5 o9 x _. J+ `& z5 Y4 I
ws.close();
4 v+ H: q" a0 Q; Y1 o
});
% M* C; C' u1 d+ P$ D
, s0 J, @' ^( h4 p3 Z s$ L
$('#send').click(function () {6 n% [, F# U' i0 P `: g
if (ws.readyState == WebSocket.OPEN) {0 ^" t* {3 M/ A$ N4 A; {2 m
ws.send($("#to").val() + "|" + $('#content').val());
) w1 x5 D6 S6 q6 t" M# e! b
}: s* ] [0 Y! u. n) z
else {/ P# e1 b! D, m! B# R5 x1 y
$('#tips').text('连接已经关闭');1 G% M/ F- p# u* J; u( Z- u% V
}
$ F& i: I7 x2 t; l" u+ e( L
});
: n2 w8 S+ y2 g" ^! i
9 d2 R; \7 \( ~5 s
});6 t4 F' C! W' B; M! b( u
</script>
0 a) h) G; u( A& p+ k) W" J
</head>
- r8 g- A8 @+ K
<body>% X9 N: E: a' k7 D" f) l
<div>
. p+ g" a- u+ a- T0 m' F: i1 z9 T
<input id="user" type="text" />& ], v" f. }$ [
<input id="conn" type="button" value="连接" />( V$ ~, B: L8 y1 i
<input id="close" type="button" value="关闭"/><br />( n$ w, L1 |+ q- c( f9 ^8 T
<span id="tips"></span>/ w) E+ f+ u' x5 `
<input id="content" type="text" />0 }3 R8 p5 T/ [
<input id="send" type="button" value="发送"/><br />- `* j. \* ^9 @3 p+ C
<input id="to" type="text" />目的用户0 W9 Y3 Z& S: P8 d, |+ N
<div id="msg">
: U& H! z- M& u8 u2 U
</div>
# [4 Y7 S& Y$ j" ]2 z
</div>
6 M% H$ Z! p7 }% V% Q' m' ?# W' i: y
</body>
9 f0 E0 Z2 K; k
</html>

复制代码

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

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

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

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

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