在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>* `4 {$ h) R& L3 o9 [2 J1 A
<html xmlns="http://www.w3.org/1999/xhtml">. v. x; N( J4 T
<head>! C# P3 A: Y% j
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ l, E- G' _( i1 z! L% V" `
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>( H' h( J, ?8 U3 {/ g y
<title></title>! ~" G! P* F1 E* E& L$ D
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
/ M1 T$ Z0 ~$ \. U- e3 u5 }; H
<script>: F$ M; {% b6 t, ?/ W/ L
var ws;
) s7 Z2 F% C3 V4 H. E% X
$().ready(function () {7 J1 i7 B9 A5 i7 [: l0 O8 u, j
$('#conn').click(function () {2 F* A" Z5 E, c4 c% S3 B5 N
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
5 d( u; w1 W2 r- U
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
7 R" F5 G6 o: R3 N
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();6 U6 B: s* j% d+ D! B+ w- M
//var host = "ws://192.168.85.128:8085/api/WSChat";; g6 |4 F3 a- `
//webSocket = new WebSocket(host);
_3 U1 U3 F& Q6 s
$ p( O$ K6 h, B
$('#msg').append('<p>正在连接</p>');2 p; t" s8 ]- @
- }3 s: w3 _+ t
ws.onopen = function () {
* a# C5 }/ r9 U2 t" }9 S. T, m
$('#msg').append('<p>已经连接</p>');
4 P- @) R4 \( E6 F2 [
}; u$ s9 o/ [/ v7 q! h
ws.onmessage = function (evt) {7 T7 s0 r: Q! J3 B4 z' V
$('#msg').append('<p>' + evt.data + '</p>'); \6 d3 q5 |0 K6 a! N# r
}7 k# t/ ^8 k4 d5 {' Z
ws.onerror = function (evt) {
& V2 k! z; t) g- I
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
3 @3 b- E7 f8 p( A
}
, \; d" ^9 n, M# Q/ |: \
ws.onclose = function () {
1 Q5 \/ h+ L% h& O* B ~6 H
$('#msg').append('<p>已经关闭</p>');
1 ?7 ?1 M& y) A, [
}
8 b+ x) m. n; U5 S# g3 A
});
3 {8 \0 P3 W6 {% ^
0 g7 K5 B8 f3 m6 f( `" F3 C
$('#close').click(function () {
: K; {( f9 A. h+ f2 |7 o* w3 W
ws.close();. |- |1 ^) Z# d1 s/ B' {
});
% d) o- c o* d, A1 C2 E& b5 y
! U5 t" I: |' I' o! g% q
$('#send').click(function () {
) F0 m& B9 N8 W9 `
if (ws.readyState == WebSocket.OPEN) {
# K8 v7 t+ z# @' G U2 Q9 W
ws.send($("#to").val() + "|" + $('#content').val());
4 }1 M, q3 F; Q% h$ Q8 v* R" z
}
2 Q5 ]+ @ L1 B5 x7 K
else {
% I) L, E. e7 u& m6 Y
$('#tips').text('连接已经关闭');
: {9 _! L1 Z+ y7 a' X. o1 S9 c( i
}
) T" ?8 {. v0 S' z. H$ o
});8 G/ p, i7 f) D
# ?3 a2 ~: c' w. f% W0 H; F
});' e! @! K' y/ m( g( ]% o# }/ U0 ]
</script>4 C3 P9 i' ]2 I3 b: |% q8 `
</head>
' [. x: z" ~9 A7 ^. G1 U
<body>' m" n6 d5 ^; F. Z
<div>
9 F+ E4 l: u5 L4 f* M% c
<input id="user" type="text" /> V0 b/ ~& o- O* v$ ~
<input id="conn" type="button" value="连接" />
( @% R W" V5 F, W$ n0 k Q0 l
<input id="close" type="button" value="关闭"/><br />" C) _6 y; y) I3 k7 d( f# M0 K
<span id="tips"></span>% \0 G1 u: `6 K; a
<input id="content" type="text" />
8 H. k+ C* {! _; l7 x4 D% R }8 X
<input id="send" type="button" value="发送"/><br />
" a; Q; I/ j a8 m( I
<input id="to" type="text" />目的用户, U& _+ X0 w$ `& O' Z
<div id="msg">5 ?: C8 w/ ~- s' N& G8 w
</div>( y9 j/ b {& @( X( y
</div>" s6 e) T4 f1 X, | j/ i
</body>& p0 w- h* x; L( o2 f" a5 u
</html>

复制代码

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

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

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

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

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

浏览过的版块