在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 ^$ A/ w4 o' O
<html xmlns="http://www.w3.org/1999/xhtml">
2 e* ?3 R$ i& h. f
<head>6 v7 |( T- H7 a' s7 L# k3 n
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
% J4 p6 A( X4 ^3 B8 C- t
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
2 N8 \* N' v) ~1 Q2 A# l4 E: B) ^5 l
<title></title>% `" i4 |1 w' T/ R; j6 {
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>9 S. n/ X' e) j! L6 d
<script>
% x* @$ f9 b) \% Z8 n+ u8 e, Y
var ws;
/ [+ q# m" A, S& S
$().ready(function () {
4 \6 C( Y c" I+ x/ l) E, J
$('#conn').click(function () {1 e* V4 F* B8 @
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());: |# T9 R3 L" K0 |( h
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
0 Y/ d* o! m/ G0 U W6 P% O) w
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
3 I1 a; c) {$ S9 ]/ ]9 e' U
//var host = "ws://192.168.85.128:8085/api/WSChat";' N( |/ ?! @1 E3 _7 D
//webSocket = new WebSocket(host);: c L4 W# B* Y) H
% H) t4 O% z' h; j: x
$('#msg').append('<p>正在连接</p>');
4 t6 U) V1 N" Z- g
6 J% q h3 A" C/ V
ws.onopen = function () {" ~$ n! B7 z. @
$('#msg').append('<p>已经连接</p>');* L+ c( v" h- z4 n
}* b$ l: T) J4 l1 h$ n! G
ws.onmessage = function (evt) {
+ v' h5 ~0 T+ y+ y3 F b2 D2 d+ y
$('#msg').append('<p>' + evt.data + '</p>');' J7 y+ M$ t! o) d- P9 U* x) o& `9 A) b
}4 ^" T9 u d! d7 e, g& K
ws.onerror = function (evt) {
1 o% Q3 q! Y4 i+ }1 S6 z) K% c& `2 e
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');" ]( {" A: U% Q! d) [7 G. \
}
- y3 [3 ] M# E; `; g
ws.onclose = function () {
1 r+ S' f9 v2 D
$('#msg').append('<p>已经关闭</p>');
! L( t! `) C: G5 n# d8 |
}/ y1 s/ e: |- K0 r/ o# ]
});9 _ X1 T0 A) g8 W( ?: y! q, E
. ?% g4 Q7 o5 @
$('#close').click(function () {
$ ^( {6 k5 g* ?3 X
ws.close();
! O* v/ I( c) ^
});$ R2 ^2 `0 @2 a. y7 D& o3 c, ~
/ o( Y+ ]" f# p
$('#send').click(function () {% u* W0 P M2 P% ]$ h% L
if (ws.readyState == WebSocket.OPEN) {
0 A7 v- M$ ?7 t6 r1 e# ~3 u9 p
ws.send($("#to").val() + "|" + $('#content').val());6 F7 v0 I0 V4 a( F( q! J
}, R# V4 L* ?2 a
else {
; c6 G. k) y! m; S7 |( }
$('#tips').text('连接已经关闭');+ j& Q' c& k, z( J
}
: p4 i/ U' n4 H6 Y* y
});) G7 ]( z# j: \" g
2 l, v% M R s, g1 s- f, n
});
# v3 A$ ?* c, o) h
</script>" B f3 @+ [3 K8 \
</head>
# c5 B% e0 J/ c- D5 P
<body>
6 _) v, d3 n7 |! t* O1 I+ ?
<div>2 N" G% F8 j( R3 {" i, [
<input id="user" type="text" />& z. A) U9 S b, {' K+ P
<input id="conn" type="button" value="连接" />9 l# b* ]3 U8 v) l, T
<input id="close" type="button" value="关闭"/><br />
% [3 q' r* |" E6 O# i
<span id="tips"></span>/ i) s$ I5 K' X! @' g
<input id="content" type="text" />5 I6 W5 ^# u2 ?" e% o+ R* {9 O
<input id="send" type="button" value="发送"/><br />
+ k+ E7 d' J: r5 r9 F8 O
<input id="to" type="text" />目的用户
_4 W* L* f% I& Q: K9 y
<div id="msg">! _$ h$ B. j! C# c- r
</div>& t6 C4 i# Y7 R v% Q8 Z
</div>4 Z U* h3 f7 N T
</body>
" s, S9 m1 T/ m# U8 l1 Z
</html>

复制代码

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

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

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

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

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