在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 M- d. `" Y+ W- k) x* N
<html xmlns="http://www.w3.org/1999/xhtml">& D. R3 y( x+ I8 H
<head>' Q- V- B3 _3 j, {
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>4 N1 n. ~6 ?& m3 H
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
* n0 x6 q p+ N; D' \$ k: ~
<title></title>
/ N5 w& ~% Q/ ]* \
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>( ]( f2 `; w) p x, {# S/ R) l
<script>) h! b* ?0 j3 ^6 N
var ws;1 Y- K( K0 G7 t6 l+ ]; R
$().ready(function () {" A3 q- W0 A5 v
$('#conn').click(function () {
- [2 ?0 G9 o/ }9 x5 h1 r
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());; z! Q, D9 i# S4 e
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());2 N/ P. y' I; D- t
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();9 D% r- M$ w3 f$ I. Q
//var host = "ws://192.168.85.128:8085/api/WSChat";& J4 Z7 K) j2 p* Q/ g% n; Q
//webSocket = new WebSocket(host);- W2 C5 |. x$ {- u! Q
: H- N' s8 y+ ]% Y0 u
$('#msg').append('<p>正在连接</p>'); O: V/ n% U" j# L8 L& {4 u
. ^3 j0 G8 f3 Z4 r! J7 ~
ws.onopen = function () {. M- S5 u3 N3 W0 f' `2 T6 q- c/ T
$('#msg').append('<p>已经连接</p>');# w: b. S2 d6 k
}+ Y5 j6 Q `4 g! X+ _2 S: @+ s5 P
ws.onmessage = function (evt) {5 y. F7 ^1 Y! m8 X. p/ h' L3 M% W
$('#msg').append('<p>' + evt.data + '</p>');
; f+ ?! h- C5 B1 L
}( |* g0 ?5 u* E& \) c$ M1 T+ s; q+ s
ws.onerror = function (evt) {
7 `+ s4 v) p' W( {5 Q
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');1 q1 i* K; J2 I: X$ O
}4 W+ f9 @$ r( b
ws.onclose = function () {% m$ |2 x6 O. |) u5 }( K8 B1 O
$('#msg').append('<p>已经关闭</p>');
6 ]& l9 Y+ e0 ]% c, b4 E
}0 Q0 C$ P+ w* i& ~1 b8 s6 J
});
8 f8 x( k9 D, R" w1 k7 _' P0 r
9 _7 p. e2 {5 F: J) u# [8 c- Z
$('#close').click(function () {
: H; V6 ~' m* e# |* h0 m
ws.close();
1 W* W8 P. H' ~/ G S5 n
});
" A0 _+ u& n8 R' A. c! e2 p
+ b1 t) ?+ @% t: @4 Y) J5 ]9 g& |2 J) E
$('#send').click(function () {
1 j7 w% l9 E( r1 F' P! V7 w$ e, }
if (ws.readyState == WebSocket.OPEN) {
4 j. X$ @# X; |& d4 ]
ws.send($("#to").val() + "|" + $('#content').val());0 E2 p7 B% A$ J3 F
}% W% }+ T, b7 l. M5 i
else {# I9 J& L, U! _
$('#tips').text('连接已经关闭');
8 `7 q$ g( y! T" l/ u) p
}
9 q2 [2 r5 Q2 W8 [' W+ `* ~. W2 R
});
+ M6 h9 d) g8 i: X. R: J
0 g' V' x& e$ t- w2 R
});
: ?5 p0 c4 \$ Y9 Q7 s, A
</script>
; F( D2 d5 k% G, t
</head>
6 y) \' p( u% W
<body>
% [1 A8 @+ o+ ]( F* e2 e8 L. t6 R
<div>
; r+ ~# [( ]' T3 [# |1 O8 ?2 x) ?
<input id="user" type="text" />
9 `; m# \; I" z9 b
<input id="conn" type="button" value="连接" />
( d! ]. {3 n! L; C+ B3 H/ p
<input id="close" type="button" value="关闭"/><br />
' h- n5 Z- F' E* C
<span id="tips"></span>2 z& ], S3 y1 X0 I
<input id="content" type="text" />
1 I% ~' W% ~9 h% Y# w# ], r, T
<input id="send" type="button" value="发送"/><br />
<input id="to" type="text" />目的用户
" e l" O4 N9 D, D
<div id="msg">
: U8 a7 ^: c& B
</div>
- Y+ S8 Y. A: ~$ Q! j2 l2 Z
</div>
- V. r- {: g6 U# t8 o+ T8 s( q
</body>
/ n% Z m* z, O
</html>

复制代码

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

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

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

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

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

浏览过的版块