Socket.io实际上是WebSocket的父集，Socket.io封装了WebSocket和轮询等方法

首先得在你的项目中安装socket.io

$ npm install socket.io

服务端代码：

var app=require('http').createServer()

var io=require('socket.io')(app)

var PORT =;

var clientCount=;

app.listen(PORT)

io.on('connection',function(socket){

    clientCount++

    socket.nickname='user'+clientCount

    io.emit('enter',socket.nickname+' comes in')

    socket.on('message',function(str){

        io.emit('message',socket.nickname+' says: '+str)

    })

    socket.on('disconnect',function(){

        io.emit('leave',socket.nickname+' left')

    })

})

客户端代码：

<!DOCTYPE html>

<html>

<head>

    <mate charset='utf-8' />

    <title>websocket</title>

    <script src="socket.io.js"></script>

</head>

<body>

    <h1>chat room</h1>

    <input type="text" id='sendtxt' />

    <button id='sendbtn'>发送</button>

    <div id="recv"></div>

    <script type="text/javascript">

        var socket=io("ws://localhost:5555/");

        function showMessage(str,type){

            var div=document.createElement('div');

            div.innerHTML=str;

            if(type=='enter'){

                div.style.color='blue';

            }else if(type=='leave'){

                div.style.color='red'

            }

            document.body.appendChild(div);

        }

        document.getElementById('sendbtn').onclick=function(){

            var txt=document.getElementById("sendtxt").value;

            if(txt){

                socket.emit('message',txt);

            }

        }

        socket.on('enter',function(data){

            showMessage(data,'enter')

        })

        socket.on('message',function(data){

            showMessage(data,'message')

        })

        socket.on('leave',function(data){

            showMessage(data,'leave')

        })

    </script>

</body>

</html>

来自慕课网课程：

https://www.imooc.com/learn/861

使用socket.io实现简单的聊天功能的更多相关文章

  1. 使用socket.io开发简单群聊功能

    1.新建package.json文件: { "name": "socket-chat-example", "version": " ...

  2. Spring 学习——基于Spring WebSocket 和STOMP实现简单的聊天功能

    本篇主要讲解如何使用Spring websocket 和STOMP搭建一个简单的聊天功能项目,里面使用到的技术,如websocket和STOMP等会简单介绍,不会太深,如果对相关介绍不是很了解的,请自 ...

  3. vue + socket.io实现一个简易聊天室

    vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那 ...

  4. 基于react+react-router+redux+socket.io+koa开发一个聊天室

    最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...

  5. 利用socket.io实现多人聊天室(基于Nodejs)

    socket.io简单介绍 在Html5中存在着这种一个新特性.引入了websocket,关于websocket的内部实现原理能够看这篇文章.这篇文章讲述了websocket无到有,依据协议,分析数据 ...

  6. 采用tcp协议和UDP协议实现简单的聊天功能

    Date: 2019-06-19 Author: Sun 一. Python3输出带颜色字体 实现过程: ​ 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关. ​ 转义 ...

  7. 基于Node.js+socket.IO创建的Web聊天室

    这段时间进了一个新的项目组,项目是用Appcan来做一个跨平台的移动运维系统,其中前台和后台之间本来是打算用WebSocket来实现的,但写好了示例后发现android不支持WebSocket,大为受 ...

  8. 基于 socket.io， 简单实现多平台类似你猜我画 socket 数据传输

    一.前言 socket.io 实现了实时双向的基于事件的通讯机制,是基于 webSocket 的封装,但它不仅仅包括 webSocket,还对轮询(Polling)机制以及其它的实时通信方式封装成了通 ...

  9. android中实现简单的聊天功能

    这个例子只是简单的实现了单机版的聊天功能,自己跟自己聊,啦啦~~ 主要还是展示RecyclerView控件的使用吧~ 参考我之前写的文章: android中RecyclerView控件的使用 andr ...

随机推荐

  1. 前端图片canvas，file，blob，DataURL等格式转换

    将file转化成base64 方法一:利用URL.createObjectURL() <!DOCTYPE html> <html> <head> <title ...

  2. @Bean修饰的方法参数的注入方式

    @Bean修饰的方法参数的注入方式: 方法参数默认注入方式为Autowired,即先根据类型匹配,若有多个在根据名称进行匹配. 1:复杂类型可以通过@Qualifier(value=“XXX”)限定; ...

  3. WPF 精修篇 Winform 嵌入WPF控件

    原文:WPF 精修篇 Winform 嵌入WPF控件 首先 创建WPF控件库 这样就有了一个WPF界面 在wpf中增加界面等 在winform中增加WPFDLL 重新生成解决方案 在左侧工具栏 出现W ...

  4. 2019 vs 如何升级到.net core 3.0 版本

    写在前面 看到微软的官网都已经更新.NET CORE 3.0的版本了.发现自己的还是.NET CORE 2.1X 的版本. 那应该如果升级到.NET CORE 3.0 的版本呢? 思考 [1]首先,我 ...

  5. JDBC注册驱动程序3种方式

    以MySQL的驱动为例,介绍注册驱动程序的3种方式 1:Class.forName("com.mysql.cj.jdbc.Driver");// 加载数据库驱动 package c ...

  6. 关于两个DIV之间的空白字符

    首先!!!!这个问题应该是去面试前端会经常问到的问题!!! 如,下面这个例子: <!DOCTYPE html> <html lang="zh-CN"> &l ...

  7. nodeJs 报maximum call stack size exceeded js

    先看错误 查了下资料说是什么js堆栈异常,是递归造成的啥的,但我程序里没用到啥递归,整了老半天将collection-repeat换成ng-repeat然后就好啦,具体原因待探讨.

  8. Linux shell awk中printf使用

    printf 是 awk 的重要格式化输出命令 printf格式化输出内容 格式:     printf format,item1,item2...     要点: 1,printf输出时要指定格式f ...

  9. javascript之DOM（一节点类型Node）

    DOM(Document Object Model)是针对HTML和XML文档的一个API.DOM描述的是一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.起源于DHML,现为W3C的推 ...

  10. C++ 梳理：跑通简单程序

    C++ 结合了三个编程流派: 过程式编程:C 特性,结构化语言,强调过程 面向对象编程:C++ 对于 C 语言的补充,一切皆对象,强调数据 泛型编程(generic programming):由 C+ ...