在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>
- _7 n+ q) C9 P
<html xmlns="http://www.w3.org/1999/xhtml">, v+ ]/ r2 X0 e* m
<head>5 ?' Y- q2 l, `3 Y
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6 l4 R$ V& [9 x/ b
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
* n- _% n3 e5 f. a; p, v' a! g
<title></title>5 `+ j& Y: f1 V
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
: p1 T8 ?$ o# I: Z8 ^1 r
<script>- ~- V) z& { i7 ^0 U. e
var ws;
p: u5 G/ P' f% u# h
$().ready(function () {
" z; v& A6 E" e. \' K: \7 F
$('#conn').click(function () {
7 k8 i7 F/ l ~! s8 f' c" |
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());+ d$ K, _7 m# u& ` p
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
7 q7 Q0 B" M7 {0 Q" |: F+ S
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
) c9 Q" h: K0 G& |! p$ L
//var host = "ws://192.168.85.128:8085/api/WSChat";
5 G% |, d M' K- s, B R$ k
//webSocket = new WebSocket(host);
5 d, m1 C; V/ b+ q8 }2 n% ^# j. u+ v
& \6 f* g: Y: h5 t" v; U3 U
$('#msg').append('<p>正在连接</p>');1 W3 e- V, }, a% O8 n' ^
: w3 j/ t9 @2 }$ @7 n( o
ws.onopen = function () {1 W5 I4 l! e c# r- K: n( I
$('#msg').append('<p>已经连接</p>');
/ I2 t7 [& u _- i; O6 y
}
! d6 P: z- O) i5 g& _ m' k+ u
ws.onmessage = function (evt) {: q2 p# e% d) U j2 M% x
$('#msg').append('<p>' + evt.data + '</p>');
4 j( H. u0 z& T
}
, d) k3 ]& f! P% u3 Z0 L+ L9 R
ws.onerror = function (evt) {
1 s7 ]) n, x1 c+ B4 n1 t
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
* X& f2 C7 e/ R9 J
}6 o0 l, o; s$ n" \* I; @; z+ T4 s
ws.onclose = function () {- w- W( O+ {. G/ j
$('#msg').append('<p>已经关闭</p>');: b& l z* S* }; K- J, a7 p
}
# a6 j2 F- F6 F
});
5 k6 {; k% A1 r' ]* C3 C
( u# j/ I5 J$ a* P
$('#close').click(function () {
5 D5 o6 Z2 G1 I
ws.close();7 }0 Y& P2 g; x: p# D- L) H
});% x/ e( Y6 U- J% J0 s* D
/ f6 L$ L7 O* ^2 }& T
$('#send').click(function () {
8 a& y4 i4 t7 w
if (ws.readyState == WebSocket.OPEN) {5 \+ P$ _* }: W6 L, v2 Z5 |& Y& R
ws.send($("#to").val() + "|" + $('#content').val());% g1 x9 D) s3 V3 R- p: M
}) r7 t! B/ G8 H0 j4 u* |
else {4 O2 E* c, C0 Z8 m) L
$('#tips').text('连接已经关闭');, ^) c5 D/ z6 s5 I9 s. c3 l, R F
}' E/ E- K$ f, g+ ~5 ?" P
});, J, y. B D" j1 H* I e0 _
% S8 {7 \% N' w/ v, z
});0 [9 a0 H2 o% z
</script>' c0 ~+ s1 m6 ~# p
</head>8 p6 Q; o% O ~& [+ G; ]8 m
<body> r0 B+ ^ \0 t5 x7 m% s0 S- I
<div>
; ?8 a0 n2 `$ h( _
<input id="user" type="text" />
, S% l- C. B8 R o3 M7 O! d
<input id="conn" type="button" value="连接" />
0 O1 b8 S2 I- N4 H- i. q* R0 x
<input id="close" type="button" value="关闭"/><br />
9 Q. Z% t- n; o, p/ S, s
<span id="tips"></span>
0 [1 W H! `$ d# @
<input id="content" type="text" />1 K* o# `3 i! c
<input id="send" type="button" value="发送"/><br />; p4 S: V+ S, }4 _: O
<input id="to" type="text" />目的用户
+ U5 x$ \& ~9 \0 H
<div id="msg">* G- r6 o/ C. d, U4 K/ _+ w
</div>" ^/ r. P" J; U3 G
</div>
0 A; V$ o7 J) j$ e \
</body>" d5 m' @5 Q# T4 D
</html>

复制代码

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

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

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

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

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