使用socket.io实现简单聊天室案例


Posted in Javascript onJanuary 02, 2018

本文实例为大家分享了socket.io实现简单聊天室的具体代码,供大家参考,具体内容如下

1、客户端【index.html】代码:

<body>
  <h3>socket简例</h3>
  <hr>
  <div id = 'app'>
    <div>
      <div>
        <ul>
          <li v-for = 'item in msgs'>
            {{item.name}}说:{{item.content}}
          </li>
        </ul>
      </div>
      <div>
        <p><input type="text" v-model = 'msg'><button @click = 'm_send()'>发送</button></p>
      </div>
    </div>
  </div>

  <script type="text/javascript" src = 'https://cdn.bootcss.com/vue/2.5.9/vue.min.js'></script>
  <script type="text/javascript" src = 'https://cdn.bootcss.com/socket.io/1.7.3/socket.io.min.js'></script>
  <script type="text/javascript">

    var _vm = new Vue({
      data : {
        name : '用户',
        msg : '',
        msgs : [],
      },
      methods : {
        m_send : function() {

          // 向客户端发送消息
          socket_client.emit('say_client', {
            name : this.name,
            content : this.msg
          }) ;
          this.msg = '' ;
        }
      }
    }).$mount('#app') ;


    // socket服务器
    var socket_client = io.connect('http://127.0.0.1:3000') ; 

    /**
     * 监听服务端发来的消息
     *
     * 1、“say_server”是客户端发出信息时的key值
     * 2、“res”是客户端传来的value值
     */ 
    socket_client.on('say_server' ,function(res){

      console.log('服务端发来的消息为:', res) ;

      _vm.msgs.push(res);
    });

  </script>
</body>

2、服务端【app.js】代码:

const http = require('http') ;
const server = http.createServer() ;

// web服务器
const express = require('express') ;
const app = express();

app.use(express.static(__dirname + '/public'));

app.listen(8888, function () {
  console.log('web服务器成功启动了,IP:127.0.0.1,端口号:8888') ;
});


// socket服务器

const socketio = require('socket.io') ;
const socket_server = socketio(server) ;

// 建立和客户端的socket连接
socket_server.on('connection', function(client) {

// console.log(client) ;          // 查看连接进来的客户端对象内容  
// console.log(Object.keys(client)) ;    // 查看连接进来的客户端对象的关键key值

  /**
   * 监听客户端发来的消息
   *
   * 1、“say_client”是客户端发出信息时的key值
   * 2、“res”是客户端传来的value值
   */ 
  client.on('say_client', function(res) {
    console.log('客户端发来的消息为:', res) ;

    // 向客户端发送消息
    socket_server.emit('say_server', res) ;
  }) ;
}) ;


server.listen(3000, function() {
  console.log('socket服务器成功启动了,IP:127.0.0.1,端口号:3000') ;  
}) ;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
layui实现动态和静态分页
Apr 28 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 #Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 #Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 #Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 #jQuery
Node实战之不同环境下配置文件使用教程
Jan 02 #Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 #jQuery
Node解决简单重复问题系列之Excel内容的获取
Jan 02 #Javascript
You might like
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP中cookie知识点学习
2018/05/06 PHP
php微信开发之谷歌测距
2018/06/14 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
某公司部分笔试题
2013/11/05 面试题
为什么要使用servlet
2016/01/17 面试题
数控专业推荐信范文
2013/12/02 职场文书
老师的检讨书
2014/02/23 职场文书
教师考核评语
2014/04/28 职场文书
项目负责人任命书
2014/06/04 职场文书
入党现实表现材料
2014/12/23 职场文书
大学教师个人总结
2015/02/10 职场文书
食品质检员岗位职责
2015/04/08 职场文书