在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>
+ z" `3 L) R0 z( D4 f) x& x
<html xmlns="http://www.w3.org/1999/xhtml">: O {% }) X; L/ |) m- f& S
<head>5 E' w8 M* k2 i+ I, M: G8 h/ M
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/># p7 G2 l' r) [1 f
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>6 u) |4 _0 u4 S# u4 P S
<title></title>4 E3 ]* n& P# t
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>5 s! T% Q* A9 E. g4 t, h5 @( c
<script>
! `" Z1 D" y9 i
var ws;9 y- _5 e% V' h1 I% T
$().ready(function () {
! R7 a# c& S& {4 ~/ w
$('#conn').click(function () {
$ R' q: Q* D" L. E" J) H- R
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());& d' r; J% F$ T, r+ g1 _
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());: G3 W: d& A" b
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();9 e- E% b& U' z) l: h _0 ^$ I
//var host = "ws://192.168.85.128:8085/api/WSChat";
* f) k0 R$ L& R
//webSocket = new WebSocket(host);! F2 w7 `* a; l$ k
& M! U( Y+ T1 f r8 ~& [' |: [
$('#msg').append('<p>正在连接</p>');' i8 [ w9 y; t6 n5 l, h1 @9 V
+ y3 l: S+ N/ R! ]! P7 Q
ws.onopen = function () {6 v( s7 o/ y9 B' E1 Y
$('#msg').append('<p>已经连接</p>');
8 ~' R; j: F/ f! Z
}
) z3 y; \ A3 ?9 L
ws.onmessage = function (evt) {
+ @, p L* y7 I" J) V" H
$('#msg').append('<p>' + evt.data + '</p>');
2 @9 H4 E/ \& ^. g
}. O* J6 N! J4 {* ?+ _
ws.onerror = function (evt) {" ]6 y6 k5 ?* z7 R- k" `) R" l
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
4 E* P: C( o6 _: e+ P* d0 W0 n, u9 D
}$ e0 F# w( w( E3 a3 b' W
ws.onclose = function () {% {; ]$ Q }" n/ _9 t
$('#msg').append('<p>已经关闭</p>');/ `# f+ {# B/ n4 l) x6 O/ A" Y1 l
}
, E1 I8 f" h, c, k+ ^. e
});7 M1 c" g1 @) H9 a# ]& c
% R5 z/ \: q# N! u& j
$('#close').click(function () {
+ p% G. F' H" y. x
ws.close();
% o" o! C2 a) X
});
+ C' F4 M! \% r: n. z
& t, d0 B, z' O
$('#send').click(function () {5 a3 U- S7 E; X% N" Q
if (ws.readyState == WebSocket.OPEN) {
" E) c8 h9 e7 m3 g; t
ws.send($("#to").val() + "|" + $('#content').val());
* Y8 b# q3 Q2 A- b0 P
}# v$ O% D3 d8 Y8 S# {
else {
/ Z0 W& f) S% W) D j
$('#tips').text('连接已经关闭');) Z3 @( s% H. N: [8 ?3 M8 a
}, Q1 I7 S0 W* m/ `; A' @
});* O+ V' P- N5 t4 I* a- _( _
x+ A9 y5 H% f$ }
});
& f, J7 b. `* R2 S
</script>
; p/ C- q# M, f+ N" a/ m
</head>8 S; L( W. o2 k0 Y$ p9 w8 [- ]& E9 ~
<body>2 Q, ?: a8 ^- }! A
<div>
2 y) r; j6 a+ `4 x
<input id="user" type="text" />8 Y: U# e* I! X0 X: L4 q$ C- |' h
<input id="conn" type="button" value="连接" />$ A5 F) A4 j& A; E N" [
<input id="close" type="button" value="关闭"/><br />
+ o7 j" u. m* o' A' F3 g$ e/ B
<span id="tips"></span>
( |1 `7 D7 B. @) Z T1 g
<input id="content" type="text" />, p- r% ~) C6 Z3 Z' t
<input id="send" type="button" value="发送"/><br />/ f1 H' @+ U; M1 M0 j2 j
<input id="to" type="text" />目的用户2 A, P6 u) z# A) m5 M6 F
<div id="msg">
& S1 Q4 j. m' H3 f+ H% D
</div>% N; \% G+ I. b- z0 I' ^: z
</div>, U) {" w# Z" l+ G0 a1 `6 r0 g
</body>2 D- \" ]: `: ~2 o: U- R
</html>

复制代码

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

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

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

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

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