在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>* G8 \: _" y# s
<html xmlns="http://www.w3.org/1999/xhtml">: \1 S# Z6 L3 R7 T" _6 o/ m/ I
<head>: J; M" L7 U p3 m3 q9 v
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>/ n( ^2 O' w$ J1 f
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>5 y) b* Y$ b# [1 h. m
<title></title>
F7 ?# x, y$ T7 I6 X, w0 @" \
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
) G1 T9 z$ R2 Y& y
<script>9 h5 x H4 I s( h0 c* Y! h: @4 T) b
var ws;& J. W# z% Y3 \* A& l. H
$().ready(function () {
1 ~, T; R2 D, K4 b1 L9 K1 }% ]5 Z& Y
$('#conn').click(function () {
) S3 F6 {* e5 `" o% o
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
% z% L% {$ G2 W& e8 r' L% B
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
8 A$ G+ _; H2 K- j$ A/ {; [
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();% i( K% N& P8 \
//var host = "ws://192.168.85.128:8085/api/WSChat";8 O Y! a3 b; T
//webSocket = new WebSocket(host);
( q' d# @, o& u4 Z/ r
7 Y c( _8 ^3 m& a6 j5 a+ C
$('#msg').append('<p>正在连接</p>');
6 x1 L- T0 Y# q; ~$ h' c; a
8 ]' J9 {5 C9 t! ]
ws.onopen = function () {
+ Z" W/ W9 i! w) }% r! C/ I
$('#msg').append('<p>已经连接</p>');
- \2 q) N5 w; l6 E- k$ D1 q
}- q2 \( g I8 \$ r% B4 S7 [. f4 V
ws.onmessage = function (evt) {
5 s; G9 l/ T! E
$('#msg').append('<p>' + evt.data + '</p>');
t, R$ N+ Y8 Z' z6 F
}. w8 P5 S6 l S: y
ws.onerror = function (evt) {
9 p8 p' I3 e) T* h+ a' Q% b
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
: `2 f- h6 A9 i& W# i
}( y8 a* p6 w) Y9 x
ws.onclose = function () {
: L8 q A# `/ B* G- s
$('#msg').append('<p>已经关闭</p>');. D# {9 l& u% X& ^! ?$ O
}+ E/ d4 s S. E7 C0 y
});
# x' ], f; W* m& M" d
+ m; Y+ R4 \5 i5 d# c; P
$('#close').click(function () {! J, g& t r% C' M0 \( y
ws.close();- F ?/ {9 ~1 ]% P9 j4 R+ z# Y f6 ?
});
* z! `8 A3 ?4 H
$ l" S& t6 M# p! Z' W5 F0 P
$('#send').click(function () {( u3 n: {) o' H5 E- S' M
if (ws.readyState == WebSocket.OPEN) {" G0 ^7 t) U# X" H6 o
ws.send($("#to").val() + "|" + $('#content').val());
" z1 D; T& v2 Q9 L! L% e5 k
}0 M( T6 V9 `# X( }$ r
else {
' h+ Y9 W0 N3 h' V! m( p
$('#tips').text('连接已经关闭');
7 r0 ]: ^! K7 d6 m4 t: m" ] Z
}% ?4 R+ s: v) H( E
});
S( I) |2 z! S: ^: |
+ I5 [* i0 ^) W
});
" |/ s* v% A8 u
</script>8 S) d4 p6 H, m; m8 B0 i( M
</head>! y$ z8 c/ ~, h& T
<body>/ m2 v- M( Z+ U( ^% ^
<div>
. l& h0 M+ |, U$ F7 V+ `* \& J
<input id="user" type="text" />) V4 x2 S4 [% x9 a9 W
<input id="conn" type="button" value="连接" /># R! k2 a$ w# P# f
<input id="close" type="button" value="关闭"/><br />
; M0 K3 F+ _" k% J& _( f0 O
<span id="tips"></span>$ ]) H# v) ^) k' ^2 H5 a
<input id="content" type="text" />- u% a5 z% h! v. g V
<input id="send" type="button" value="发送"/><br /># W5 r3 R- z" Q2 T" L& M7 [& S( T- H
<input id="to" type="text" />目的用户
7 ~0 `6 Z1 n, E; m% K' c# F6 X$ p9 ?
<div id="msg">7 O, I/ t0 l3 ~* S4 b
</div>
: k) K6 T5 Z, R4 R7 K, q, ]( s6 Y8 v
</div>/ O1 p$ ?5 L) g
</body>' N) j* j& }6 u E
</html>

复制代码

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

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

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

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

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

浏览过的版块