在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> @6 B3 a; H4 T3 }( J
<html xmlns="http://www.w3.org/1999/xhtml">$ Y! I. d- z) O/ C9 \. q
<head>' t; [$ \, v0 I$ n# m- a
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
a2 t* P ^. m5 `0 g
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
4 o+ B! |* X+ c) |! O
<title></title>3 H% U6 s+ }- u7 j) f2 w7 `
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>" H9 t7 }! m6 V
<script>
( D* Z7 q) K2 \
var ws;
) { E' t8 X3 \! {
$().ready(function () {* r( r) l" Q. |
$('#conn').click(function () {$ c! n1 }" c4 A$ m9 Z) e5 V G
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
0 {6 W X& B0 n! e1 t
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());2 J8 S6 T; ^0 V1 o
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
$ f2 x: Z! k1 M0 _5 k
//var host = "ws://192.168.85.128:8085/api/WSChat";" d# @( U3 \0 h5 N$ d# X1 D1 x+ }
//webSocket = new WebSocket(host);
( M3 h4 ]& l, f' k# I+ N. A6 i* _
; m% |3 c. I1 f, a
$('#msg').append('<p>正在连接</p>');
- R. _ D1 E* D2 ^9 b- g; ?
% u' W7 `4 ~) h4 d% _
ws.onopen = function () {2 |; \# _" p! z6 j( C1 F/ r
$('#msg').append('<p>已经连接</p>');
, n2 m9 y) U7 n
}
! V+ a: v t: X; ?3 z2 F7 F7 N" d
ws.onmessage = function (evt) {% v7 ]/ Y( q6 e, d
$('#msg').append('<p>' + evt.data + '</p>');
2 R+ Y: z5 D- Q& t/ E
}
$ y7 ?! e- @& Z9 K$ {+ f
ws.onerror = function (evt) {* I+ Z& b9 \: a
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>'); s) ~; v F9 `& J: ]$ N
}
& K- K% F& J* T$ p
ws.onclose = function () {
" Q5 O$ P' b5 x7 q
$('#msg').append('<p>已经关闭</p>');7 ?: E; ^0 O! v N% j6 ?
}
! x9 Z# z4 F4 I9 A( @! i* {; g
});$ Z9 ?! G) j' V% T+ w* k K
. L' j4 R8 d% Z, O
$('#close').click(function () {
1 y5 N$ O* X3 c" v! R
ws.close();
! s7 x( o, G( J& K {6 g8 S5 j
}); S5 B7 g8 Z8 _8 r, ]
6 Y3 f. [+ J' M# F$ p
$('#send').click(function () {
. |( D- V) z" |9 Z% o( h* }
if (ws.readyState == WebSocket.OPEN) {
+ M; j) \0 G {% `/ O, ?; {
ws.send($("#to").val() + "|" + $('#content').val());% q) r9 j, S4 M
} F9 G \2 r/ S9 K! R$ ?5 ^* D
else {, c" O3 k3 c' {6 R, z
$('#tips').text('连接已经关闭');
# `6 q& E; B, w( X4 s- i4 ^( e) X
}* |- i4 w- D0 I1 Z
});# f/ O7 y: ~! _7 s+ f* I" V
4 M. c0 E n$ M; ?( d2 P, g3 s0 a& `
});/ P$ w* K A( B+ L* r
</script>+ F& @3 I9 Z+ s; e7 W' r- A( }
</head>
& J5 l7 P+ }2 e* U
<body>
! y6 H+ \; ` b& S
<div>
- q* {; K! X8 L- z7 Z
<input id="user" type="text" />, k# @# A5 |* B
<input id="conn" type="button" value="连接" />
# J! M+ V2 p. a
<input id="close" type="button" value="关闭"/><br />
- e) _: E) s( H3 x- h' W
<span id="tips"></span>
8 ~5 H2 \. V/ J p
<input id="content" type="text" /># V. g9 M. S1 ^$ p7 R6 X! j! H
<input id="send" type="button" value="发送"/><br />
8 q. p; B: c/ I5 Z5 m
<input id="to" type="text" />目的用户 e6 N7 V$ j N0 Z, M' \( K
<div id="msg"># T: Z/ D- @2 P2 h4 m7 {
</div>2 V# X* _+ V9 I" R3 q
</div>% t8 p# Q4 V! R v( H- o9 c3 L
</body>) t9 D0 W$ Y/ A% u6 `
</html>

复制代码

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

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

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

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

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

浏览过的版块