在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>
8 h( e+ N! I4 J* w0 ?/ Q6 |
<html xmlns="http://www.w3.org/1999/xhtml">
L n [1 Z- Y( x7 q! `6 F0 a
<head>0 [( K6 D1 K( l4 P6 ^
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
. P% W/ w% R7 q1 Z7 {0 O
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>- J9 ^# }2 B2 c9 {# s: t, j
<title></title>
+ q! U& ]. {2 i& {
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>- [$ q3 n& D: s5 n
<script>
" {, Z2 t6 U6 A6 i, P% ^- u7 }
var ws;) F5 j. Y( ]/ Q" [# [$ {- z( D4 N
$().ready(function () {
2 d* U+ K9 [3 j7 N& M2 H3 W, T
$('#conn').click(function () {7 k, A1 m" {2 f
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
- F& q4 l! p* S, G
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());' u# \' v) t9 \0 n. a$ }. O! `* L
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
! F V r% |9 x. w8 Z
//var host = "ws://192.168.85.128:8085/api/WSChat";
+ }3 S! i: S) C; `' E' Y3 Z
//webSocket = new WebSocket(host);$ j7 r0 x4 V0 j% X! q% H
8 O, a* Q$ n9 H& f. D
$('#msg').append('<p>正在连接</p>');$ E3 x. q. e# F% `
3 t$ O& @( a/ {+ C C* j
ws.onopen = function () {
" D `7 h7 r6 F, e6 y* }
$('#msg').append('<p>已经连接</p>');
- z% M- l. S- M
}: e5 t! y* T" o9 ?. V& P. j! P" @; R
ws.onmessage = function (evt) {
4 l r+ e! s! |+ ^7 A2 q
$('#msg').append('<p>' + evt.data + '</p>');, Y( R z2 J% l# y
}
: t' @( y' I9 x8 s/ b/ a' |
ws.onerror = function (evt) {
6 A) ]* T V- m$ @
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
! E7 @* v; F3 A
}
" Y8 f( v0 Z' _0 `% R! ^
ws.onclose = function () {
q9 r2 K/ a( U' g) t! b
$('#msg').append('<p>已经关闭</p>');8 F" _9 {* M# u3 K! n
}5 K+ k V% O( a9 \% [3 C
}); W' G2 |6 B* I% Z! C, v
0 |" G+ G( Z' |6 c3 A9 \9 V
$('#close').click(function () {; u q- i4 Q; A" A- }1 ]4 e
ws.close();
( z& q+ |6 h* B
});
0 X ?; b; r$ d
( \' D% M9 A. v% P
$('#send').click(function () {) i' ^4 d- x2 f; T1 q: p5 t
if (ws.readyState == WebSocket.OPEN) {/ m, x: U* g5 ?1 K9 m7 w
ws.send($("#to").val() + "|" + $('#content').val());
# v* S5 m5 [. M0 S4 F% Q
}
7 k2 H1 O1 e% L/ W% x
else {
6 u) g$ m Z+ d, }
$('#tips').text('连接已经关闭');
6 r9 ]: u, u0 f4 n
}+ M4 @& x5 G c& u3 S$ I% i: C
});$ Z- }4 z3 _" y
# [/ A C0 ^8 Y5 q
});
5 a2 n* J) ?3 z+ r$ H) J
</script>% [! J3 v d; V3 x
</head>5 ^. b& Q! l+ J6 h( b) O" L+ L
<body>
7 W, P }% N. h) p
<div>) E, T! m7 Y! S) `) Q( G+ s
<input id="user" type="text" />. E2 J6 f) n" v
<input id="conn" type="button" value="连接" />2 w( r, Z' n* q
<input id="close" type="button" value="关闭"/><br />
' B2 T5 [0 \: t. S$ f8 h) l$ R% R
<span id="tips"></span>
0 U1 _4 U: O+ r8 M
<input id="content" type="text" />% \$ V8 V* q B
<input id="send" type="button" value="发送"/><br />$ O' k% A2 ?& t6 r* d# i# h
<input id="to" type="text" />目的用户; x% ? d3 K1 h
<div id="msg">
" T! P. J S( z& T
</div>- Z% W" K; O6 Z" Q
</div>
0 K7 e# K* l r6 l
</body>3 c. S: M$ q0 v% j
</html>

复制代码

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

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

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

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

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

浏览过的版块