在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>& e1 F7 K# F8 S- Y: {2 J! z
<html xmlns="http://www.w3.org/1999/xhtml">
1 {( U; g9 D2 V: b) z2 w
<head>
* a3 p+ u; g# \# V+ M+ J& V+ Q- w
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>% x' A/ p8 g* M! _4 u$ |% A F z/ h$ A3 M
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>& }: [. g2 W# I( L* o
<title></title>
6 \6 K3 m: M4 {) i# Y
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
/ w' j# ]0 |9 H1 p
<script>
" i8 y% `4 R/ s3 @
var ws;
5 K, P2 t' J% \" r' n2 c" Q# B$ u5 Z
$().ready(function () {" X P: ]. M9 ~* _6 H
$('#conn').click(function () {
0 F+ h! {4 h: d! G
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val()); b6 h" P0 z$ S2 R3 y$ l/ g
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());' O9 j# H8 X0 b% [3 x' P: J
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
& N1 a- F4 x" c5 l
//var host = "ws://192.168.85.128:8085/api/WSChat";8 L5 l( D+ @6 \) t+ V0 U
//webSocket = new WebSocket(host);8 Z, @+ r, x9 i% B8 L! y
3 g( g! u/ F: x5 |
$('#msg').append('<p>正在连接</p>');
/ t8 P5 R$ n+ ] S J% P' w
3 w* c: S/ y9 _, u( e/ z1 k/ a
ws.onopen = function () {6 p8 i7 V0 M" x; G p5 j
$('#msg').append('<p>已经连接</p>');3 K7 t- Y4 ^$ @8 { Z
}
% W3 U& b8 [ A( T7 y8 p3 G' l4 O2 v
ws.onmessage = function (evt) {6 s1 X0 X$ G# A: X
$('#msg').append('<p>' + evt.data + '</p>');
- X8 K# j; A, I- }2 P
}
5 o7 \9 x2 V# w! p5 a$ O8 S/ c
ws.onerror = function (evt) {/ h# e9 S2 Y/ J) V3 Q) u4 n- a; Q
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');0 {1 q* f2 [7 p. B4 h/ s0 X: n: k" F
}
; u9 G8 g2 ?, J0 p* ~, v, p" v
ws.onclose = function () {
! m1 l1 p9 C# B A, ]' D0 K, C5 u; l
$('#msg').append('<p>已经关闭</p>');
# q% y: H* Q6 y# L2 j
}
5 O" a- a2 h5 T! {1 N
});
7 M: R5 @7 t9 \; y
' F' t* X# j$ E1 U5 a' V
$('#close').click(function () {% U, r( |$ y! i9 s! j" i
ws.close();- v0 T; y( z) V5 h
});
8 [: ~! L/ x) j
2 [: C; E0 O/ k" U# ^% [
$('#send').click(function () {9 P- t: \; i R; S5 j; d1 A9 d) S
if (ws.readyState == WebSocket.OPEN) {
5 k/ q% u# ~' R Z7 i
ws.send($("#to").val() + "|" + $('#content').val());" S D. m* P# w, h6 I
}2 C5 F7 |% j2 U- O' {
else {
. D0 i+ D5 z; P
$('#tips').text('连接已经关闭');
5 s5 o" j" h1 A: I
}- M3 N5 u( a' C: d
});8 Z t4 K A1 z3 r2 Y6 K+ \
; ?& Q' X, ^8 N4 ~: K6 k* w
});
: {! M/ r. ]+ r* @
</script>9 _8 M% r. g6 c% _
</head>
[: x1 y" I q
<body>
/ S8 O8 p$ w8 b: K9 w. ]
<div>9 `: W" l v# C# O; u7 A2 A% X4 X
<input id="user" type="text" /># Z0 a) S0 P8 Y. l
<input id="conn" type="button" value="连接" />% w# G! @+ g- \& h. [
<input id="close" type="button" value="关闭"/><br />
1 x$ W6 m6 A) |3 R, e3 x: [6 S
<span id="tips"></span>
K8 x- f, }+ g2 b
<input id="content" type="text" />9 w2 v V2 ~% [% _% s* y
<input id="send" type="button" value="发送"/><br />
( e; V& z# j& G+ V, F3 R6 k
<input id="to" type="text" />目的用户6 M! X+ L8 I$ h6 p; g" X
<div id="msg">9 a$ s6 F q$ z% J" F, _6 j
</div>
- D7 X! @+ j0 f3 @' p7 D8 K# n: C
</div>) h2 i, B% D/ X0 ~, B
</body>% _) ^: t! N* S5 s$ _! A( q# E
</html>

复制代码

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

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

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

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

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